<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--[if lt IE 9]>
    <script src=""></script>
  <![endif]-->
    <title>Zepto.js (1.1.6) API 中文文档-轻量级兼容jQuery的JavaScript库</title>

    <meta name="keywords" content="Zepto,Zepto API,中文手册,中文版,中文文档">
    <meta name="description" content="轻量级兼容jQuery的JavaScript库,Zepto, Zepto API 中文版,Zepto 中文手册,Zepto API,Zepto API 中文版,Zepto 中文手册,Zepto API 1.0, Zepto API  1.0 中文版,Zepto 1.0 中文手
册,Zepto  1.0 API">
    <link rel="stylesheet" href="../0/zeptojs_style.css">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=white>
    <meta name=format-detection content="telephone=no">
    <link rel=apple-touch-icon-precomposed href=icon.png>
    <link rel=icon type=image/png href=http://www.runoob.com/favicon.png>
</head>

<body>



    <aside id="sidebar" class="interface">

       <h1 style="font-size:16px; margin-bottom:10px;"><a class="toc_title" href="#">
    Zepto.js API 中文版 <span class="version">(1.1.6)</span>
  </a></h1>

        <ul class="toc_section">
        <li><a href="../"  target="_blank">菜鸟教程</a>
            </li>

            <li><a href="#download">下载</a>
            </li>
            <li><a href="#browsers">浏览器支持</a>
            </li>
            <li><a href="#modules">模块</a>
            </li>
            <li><a href="#changelog">Change Log</a>
            </li>
            <li><a href="#thanks">Acknowledgements</a>
            </li>

        </ul>

                   <hr/>


        <a class=toc_title href="#core">Core</a>

        <ul class="toc_section">

            <li><a href="#$()">$()</a>
            </li>

            <li><a href="#$.camelCase">$.camelCase</a>
            </li>

            <li><a href="#$.contains">$.contains</a>
            </li>

            <li><a href="#$.each">$.each</a>
            </li>

            <li><a href="#$.extend">$.extend</a>
            </li>

            <li><a href="#$.fn">$.fn</a>
            </li>

            <li><a href="#$.grep">$.grep</a>
            </li>

            <li><a href="#$.inArray">$.inArray</a>
            </li>

            <li><a href="#$.isArray">$.isArray</a>
            </li>

            <li><a href="#$.isFunction">$.isFunction</a>
            </li>

            <li><a href="#$.isPlainObject">$.isPlainObject</a>
            </li>

            <li><a href="#$.isWindow">$.isWindow</a>
            </li>

            <li><a href="#$.map">$.map</a>
            </li>

            <li><a href="#$.parseJSON">$.parseJSON</a>
            </li>

            <li><a href="#$.trim">$.trim</a>
            </li>

            <li><a href="#$.type">$.type</a>
            </li>

            <li><a href="#add">add</a>
            </li>

            <li><a href="#addClass">addClass</a>
            </li>

            <li><a href="#after">after</a>
            </li>

            <li><a href="#append">append</a>
            </li>

            <li><a href="#appendTo">appendTo</a>
            </li>

            <li><a href="#attr">attr</a>
            </li>

            <li><a href="#before">before</a>
            </li>

            <li><a href="#children">children</a>
            </li>

            <li><a href="#clone">clone</a>
            </li>

            <li><a href="#closest">closest</a>
            </li>

            <li><a href="#concat">concat</a>
            </li>

            <li><a href="#contents">contents</a>
            </li>

            <li><a href="#css">css</a>
            </li>

            <li><a href="#data">data</a>
            </li>

            <li><a href="#each">each</a>
            </li>

            <li><a href="#empty">empty</a>
            </li>

            <li><a href="#eq">eq</a>
            </li>

            <li><a href="#filter">filter</a>
            </li>

            <li><a href="#find">find</a>
            </li>

            <li><a href="#first">first</a>
            </li>

            <li><a href="#forEach">forEach</a>
            </li>

            <li><a href="#get">get</a>
            </li>

            <li><a href="#has">has</a>
            </li>

            <li><a href="#hasClass">hasClass</a>
            </li>

            <li><a href="#height">height</a>
            </li>

            <li><a href="#hide">hide</a>
            </li>

            <li><a href="#html">html</a>
            </li>

            <li><a href="#index">index</a>
            </li>

            <li><a href="#indexOf">indexOf</a>
            </li>

            <li><a href="#insertAfter">insertAfter</a>
            </li>

            <li><a href="#insertBefore">insertBefore</a>
            </li>

            <li><a href="#is">is</a>
            </li>

            <li><a href="#last">last</a>
            </li>

            <li><a href="#map">map</a>
            </li>

            <li><a href="#next">next</a>
            </li>

            <li><a href="#not">not</a>
            </li>

            <li><a href="#offset">offset</a>
            </li>

            <li><a href="#offsetParent">offsetParent</a>
            </li>

            <li><a href="#parent">parent</a>
            </li>

            <li><a href="#parents">parents</a>
            </li>

            <li><a href="#pluck">pluck</a>
            </li>

            <li><a href="#position">position</a>
            </li>

            <li><a href="#prepend">prepend</a>
            </li>

            <li><a href="#prependTo">prependTo</a>
            </li>

            <li><a href="#prev">prev</a>
            </li>

            <li><a href="#prop">prop</a>
            </li>

            <li><a href="#push">push</a>
            </li>

            <li><a href="#ready">ready</a>
            </li>

            <li><a href="#reduce">reduce</a>
            </li>

            <li><a href="#remove">remove</a>
            </li>

            <li><a href="#removeAttr">removeAttr</a>
            </li>

            <li><a href="#removeClass">removeClass</a>
            </li>

            <li><a href="#replaceWith">replaceWith</a>
            </li>

            <li><a href="#scrollLeft">scrollLeft</a>
            </li>

            <li><a href="#scrollTop">scrollTop</a>
            </li>

            <li><a href="#show">show</a>
            </li>

            <li><a href="#siblings">siblings</a>
            </li>

            <li><a href="#size">size</a>
            </li>

            <li><a href="#slice">slice</a>
            </li>

            <li><a href="#text">text</a>
            </li>

            <li><a href="#toggle">toggle</a>
            </li>

            <li><a href="#toggleClass">toggleClass</a>
            </li>

            <li><a href="#unwrap">unwrap</a>
            </li>

            <li><a href="#val">val</a>
            </li>

            <li><a href="#width">width</a>
            </li>

            <li><a href="#wrap">wrap</a>
            </li>

            <li><a href="#wrapAll">wrapAll</a>
            </li>

            <li><a href="#wrapInner">wrapInner</a>
            </li>

        </ul>


        <a class=toc_title href="#detect">Detect</a>

        <ul class="toc_section">

            <li><a href="#Detect module">Detect module</a>
            </li>

        </ul>


        <a class=toc_title href="#event">Event</a>

        <ul class="toc_section">

            <li><a href="#$.Event">$.Event</a>
            </li>

            <li><a href="#$.proxy">$.proxy</a>
            </li>

            <li><a href="#bind">bind</a>
            </li>

            <li><a href="#delegate">delegate</a>
            </li>

            <li><a href="#die">die</a>
            </li>

            <li><a href="#event.isDefaultPrevented">event.isDefaultPrevented</a>
            </li>

            <li><a href="#event.isImmediatePropagationStopped">event.isImmediatePropagationStopped</a>
            </li>

            <li><a href="#event.isPropagationStopped">event.isPropagationStopped</a>
            </li>

            <li><a href="#live">live</a>
            </li>

            <li><a href="#off">off</a>
            </li>

            <li><a href="#on">on</a>
            </li>

            <li><a href="#one">one</a>
            </li>

            <li><a href="#trigger">trigger</a>
            </li>

            <li><a href="#triggerHandler">triggerHandler</a>
            </li>

            <li><a href="#unbind">unbind</a>
            </li>

            <li><a href="#undelegate">undelegate</a>
            </li>

        </ul>


        <a class=toc_title href="#ajax">Ajax</a>

        <ul class="toc_section">

            <li><a href="#$.ajax">$.ajax</a>
            </li>

            <li><a href="#$.ajaxJSONP">$.ajaxJSONP</a>
            </li>

            <li><a href="#$.ajaxSettings">$.ajaxSettings</a>
            </li>

            <li><a href="#$.get">$.get</a>
            </li>

            <li><a href="#$.getJSON">$.getJSON</a>
            </li>

            <li><a href="#$.param">$.param</a>
            </li>

            <li><a href="#$.post">$.post</a>
            </li>

            <li><a href="#load">load</a>
            </li>

        </ul>


        <a class="toc_title" href="#form">Form</a>

        <ul class="toc_section">

            <li><a href="#serialize">serialize</a>
            </li>

            <li><a href="#serializeArray">serializeArray</a>
            </li>

            <li><a href="#submit">submit</a>
            </li>

        </ul>


        <a class="toc_title" href="#fx">Effects</a>

        <ul class="toc_section">

            <li><a href="#$.fx">$.fx</a>
            </li>

            <li><a href="#animate">animate</a>
            </li>

        </ul>


        <a class="toc_title" href="#touch">Touch</a>

        <ul class="toc_section">

            <li><a href="#Touch events">Touch events</a>
            </li>

        </ul>

    </aside>
    <div id="container_wrap">

    <div class="container">

        <header>
            <h1>
                <img src="static/imgs/logo.png" alt="Zepto.js">
            </h1>

            <p>
                <b>Zepto</b>是一个轻量级的<b>针对现代高级浏览器的JavaScript库，
    </b>它与jquery<b>有着类似的api</b>。 如果你会用jquery，那么你也会用zepto。
            </p>
           


            <p>
                <b>Zepto</b>的设计目的是<b>提供 jQuery 的类似的API</b>，但并不是100%覆盖 jQuery 。<b>Zepto</b>设计的目的是有一个5-10k的通用库、<b>下载并快速执行</b>、有一个熟悉通用的API，所以你能把你<b>主要的精力放到应用开发上</b>。
            </p>

            <p>
                Zepto 是一款开源软件，它可以被开发者和商业发布。
                <a href="https://github.com/madrobby/zepto/blob/master/MIT-LICENSE">MIT license</a>.
            </p>

            <p>
                <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://zeptojs.com/" data-text="Zepto.js, a jQuery-compatible micro-library for modern browsers" data-count="horizontal" data-via="zeptojs" data-related="thomasfuchs">Tweet</a>
            </p>

        </header>

        <h3 id="download">Download Zepto</h3>

        <p>
            默认构建包含以下模块：
            <br>
            <em>Core, Ajax, Event, Form, IE</em>.
        </p>

        <p class="important">
            Zepto v1.0 默认捆绑了Effects, iOS3, 和 Detect 模块。
            <br>请参阅下面的
            <a href="#modules">可选模块(optional modules)</a>。
        </p>
        <ul class="downloads">
            <li>
              <a href="http://zeptojs.com/zepto.js" class="download">zepto.js v1.1.6 (for development)</a>
              – <i>54.6k uncompressed, lots of comments</i>
            </li>
            <li>
              <a href="http://zeptojs.com/zepto.min.js" class="download">zepto.min.js v1.1.6 (for production)</a>
              – <i>9.1k when gzipped</i>
            </li>
          </ul>

        <p>
            Or <b><a href="https://github.com/madrobby/zepto">grab the latest version on GitHub</a></b>.
        </p>

        <ul class="downloads">
            <li>
                <iframe src="http://ghbtns.com/github-btn.html?user=madrobby&amp;repo=zepto&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                <iframe src="http://ghbtns.com/github-btn.html?user=madrobby&amp;repo=zepto&amp;type=fork&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
            </li>
        </ul>

        <p>用一个script标签引入Zepto到你的页面的底部：
        </p>

        <div class="highlight"><pre><code class="html">...
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">zepto.min.js</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
        <p class="compat">
        如果<code>$</code>变量尚未定义，Zepto只设置全局变量<code>$</code>指向它本身。
没有<code>Zepto.noConflict</code>方法。
        </p>

        <p>
            <b>如果你需要支持旧的浏览器，如Internet Explorer 9或以下，你可以退回到jQuery的1.x。</b>
        </p>

        <h3 id="browsers">浏览器支持</h3>

        <h4>初级 (100% 支持)</h4>
        <ul>
            <li>Safari 6+ (Mac)</li>
            <li>Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)</li>
            <li>Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)</li>
            <li>iOS 5+ Safari</li>
            <li>Android 2.3+ Browser</li>
            <li>Internet Explorer 10+ (Windows, Windows Phone)</li>
        </ul>

        <h4>次要目标（完全或大部分支持）</h4>
        <ul>
            <li>iOS 3+ Safari</li>
            <li>Chrome &lt;30</li>
            <li>Firefox 4+</li>
            <li>Safari &lt;6</li>
            <li>Android Browser 2.2</li>
            <li>Opera 10+</li>
            <li>webOS 1.4.5+ Browser</li>
            <li>BlackBerry Tablet OS 1.0.7+ Browser</li>
            <li>Amazon Silk 1.0+</li>
            <li>Other WebKit-based browsers/runtimes</li>
        </ul>

        <p>
            <em>需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的；因为它的最初目标在移动端提供一个精简的类似jquery的js库。</em>
        </p>

        <p>在浏览器上(Safari、Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用，你如<a href="http://phonegap.com/">PhoneGap</a>，使用Zepto是一个不错的选择。
            <p>

                <p>总之，Zepto希望在所有的现代浏览器中作为一种基础环境来使用。Zepto不支持旧版本的Internet Explorer浏览器(&lt;10)。
                </p>

                <h3>手动建立Zepto</h3>

                 <p>
    <code>zepto.js</code>和<code>zepto.min.js</code>提供以上使用方式。
    然而，为了更好的程序效果和自由性，可以在使用Zepto源码构建Zepto.js和zepto.min.js的时候选择模块并作测试，
    使用<a href="https://github.com/mishoo/UglifyJS">UglifyJS</a>根据你的需要来生成(当服务端开启gzipped后，最精简的代码)代码。
</p>

                <p>
    关于如何建立Zepto的<a href="https://github.com/madrobby/zepto#readme">the README</a>，包含运行测试和补丁。
</p>



                <h3 id="modules">Zepto 模块</h3>

                <table>
                    <thead>
                        <tr>
                            <th>module</th>
                            <th>default</th>
                            <th>description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/zepto.js#files">zepto</a>
                            </th>
                            <td>✔</td>
                            <td>核心模块；包含许多方法</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/event.js#files">event</a>
                            </th>
                            <td>✔</td>
                            <td>
                                通过<code>on()</code>&amp;
                                <code>off()</code>处理事件
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/ajax.js#files">ajax</a>
                            </th>
                            <td>✔</td>
                            <td>XMLHttpRequest 和 JSONP 实用功能</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/form.js#files">form</a>
                            </th>
                            <td>✔</td>
                            <td>序列化 &amp; 提交web表单</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/ie.js#files">ie</a>
                            </th>
                            <td>✔</td>
                            <td>
                                增加支持桌面的Internet Explorer 10+和Windows Phone 8。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/detect.js#files">detect</a>
                            </th>
                            <td></td>
                            <td>提供
                                <code>$.os</code>和
                                <code>$.browser</code>消息</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/fx.js#files">fx</a>
                            </th>
                            <td></td>
                            <td>The
                                <code>animate()</code>方法</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/fx_methods.js#files">fx_methods</a>
                            </th>
                            <td></td>
                            <td>
                                以动画形式的
                                <code>show</code>,
                                <code>hide</code>,
                                <code>toggle</code>, 和
                                <code>fade*()</code>方法.
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/assets.js#files">assets</a>
                            </th>
                            <td></td>
                            <td>
                            实验性支持从DOM中移除image元素后清理iOS的内存。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/data.js#files">data</a>
                            </th>
                            <td></td>
                            <td>
                                一个全面的
                                <code>data()</code>方法, 能够在内存中存储任意对象。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/deferred.js#files">deferred</a>
                            </th>
                            <td></td>
                            <td>
                                提供
                                <code>$.Deferred</code>promises API. 依赖"callbacks" 模块.
                                <br>当包含这个模块时候,
                                <a href="#$.ajax">
                                    <code>$.ajax()</code>
                                </a>支持promise接口链式的回调。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/callbacks.js#files">callbacks</a>
                            </th>
                            <td></td>
                            <td>
                                为"deferred"模块提供
                                <code>$.Callbacks</code>。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/selector.js#files">selector</a>
                            </th>
                            <td></td>
                            <td>
                                实验性的支持 <a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/">jQuery
      CSS 表达式</a> 实用功能，比如
                                <code>$('div:first')</code>和
                                <code>el.is(':visible')</code>。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/touch.js#files">touch</a>
                            </th>
                            <td></td>
                            <td>
                            在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
                            </td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/gesture.js#files">gesture</a>
                            </th>
                            <td></td>
                            <td>在触摸设备上触发 pinch 手势事件。</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/stack.js#files">stack</a>
                            </th>
                            <td></td>
                            <td>提供
                                <code>andSelf</code>&amp;
                                <code>end()</code>链式调用方法</td>
                        </tr>
                        <tr>
                            <th><a href="https://github.com/madrobby/zepto/blob/master/src/ios3.js#files">ios3</a>
                            </th>
                            <td></td>
                            <td>
                                String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h3>创建插件</h3>

                <p>可以通过添加方法作为 <a href="#$.fn">
                        <code>$.fn</code>
                    </a>的属性来写插件：
                </p>

                <div class="highlight"><pre><code class="js"><span class="p">;(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
  <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">,</span> <span class="p">{</span>
    <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
      <span class="c1">// `this` refers to the current Zepto collection.</span>
      <span class="c1">// When possible, return the Zepto collection to allow chaining.</span>
      <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="s1">'bar'</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">})</span>
<span class="p">})(</span><span class="nx">Zepto</span><span class="p">)</span>
</code></pre></div>

                <p>
    为了更好开始开发插件，先看下<a href="https://github.com/madrobby/zepto/blob/master/src/zepto.js">source of Zepto's core module</a>，并确认读过<a href="https://github.com/madrobby/zepto#code-style-guidelines">coding style guidelines</a>
</p>

                <section id="documentation">

                    <hr>
                    <h2 id="core">核心方法</h2>


                    <article class="method" id="$()">
                        <h3>$()


                        </h3>


                        <pre class="signature"><code>$(selector, [context]) <span class="return"> ⇒ collection</span>
$(&lt;Zepto collection&gt;) <span class="return"> ⇒ same collection</span>
$(&lt;DOM nodes&gt;) <span class="return"> ⇒ collection</span>
$(htmlString) <span class="return"> ⇒ collection</span>
$(htmlString, attributes) <span class="return"> ⇒ collection <span class="version">v1.0+</span></span>
Zepto(function($){ ... }) <span class="return">
</span></code></pre>


                        <p>通过执行css选择器，包装dom节点，或者通过一个html字符串创建多个元素 来创建一个Zepto集合对象。</p>

                        <p> Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的DOM节点，除了$(
                            <code>Zepto</code>)对象上的直接方法外(如<code>$.extend</code>)，文档对象中的所有方法都是集合方法。</p>

                        <p>如果选择器中存在content参数(css选择器，dom，或者Zepto集合对象)，那么只在所给的节点背景下进行css选择器；这个功能和使用<code>$(context).find(selector)</code>是一样的。 </p>

                        <p>当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素，使用<code>&lt;div&gt;</code> 或 <code>&lt;div/&gt;</code>形式。</p>

                        <p>当一个函数附加在 <code>DOMContentLoaded</code> 事件的处理流程中。如果页面已经加载完毕，这个方法将会立即被执行。</p>

                        <div class="highlight">
                            <pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'div'</span><span class="p">)</span>  <span class="c1">//=&gt; 所有页面中得div元素</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#foo'</span><span class="p">)</span> <span class="c1">//=&gt; ID 为 "foo" 的元素</span>

<span class="c1">// 创建元素:</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"&lt;p&gt;Hello&lt;/p&gt;"</span><span class="p">)</span> <span class="c1">//=&gt; 新的p元素</span>
<span class="c1">// 创建带有属性的元素:</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"&lt;p /&gt;"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">text</span><span class="o">:</span><span class="s2">"Hello"</span><span class="p">,</span> <span class="nx">id</span><span class="o">:</span><span class="s2">"greeting"</span><span class="p">,</span> <span class="nx">css</span><span class="o">:</span><span class="p">{</span><span class="nx">color</span><span class="o">:</span><span class="s1">'darkblue'</span><span class="p">}</span> <span class="p">})</span>
<span class="c1">//=&gt; &lt;p id=greeting style="color:darkblue"&gt;Hello&lt;/p&gt;</span>

<span class="c1">// 当页面ready的时候，执行回调:</span>
<span class="nx">Zepto</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">){</span>
  <span class="nx">alert</span><span class="p">(</span><span class="s1">'Ready to Zepto!'</span><span class="p">)</span>
<span class="p">})</span>
</code></pre>
                        </div>





                        <p class="compat">
                        不支持<a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/">jQuery CSS 扩展</a>，
                        然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器，而且可以被丢弃，与现有的代码或插件的兼容执行。
                        </p>

                        <p class="compat">
                        如果<code>$</code>变量尚未定义，Zepto只设置了全局变量<code>$</code>指向它本身。允许您同时使用的Zepto和有用的遗留代码，例如，prototype.js。只要首先加载Prototype，Zepto将不会覆盖Prototype的<code> $ </code>函数。Zepto将始终设置全局变量<code>Zepto</code>指向它本身。
                        </p>




                    </article>

                    <article class="method" id="$.camelCase">
                        <h3>$.camelCase

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.camelCase(string) <span class="return"> ⇒ string
</span></code></pre>


                        <p>将一组字符串变成“骆驼”命名法的新字符串，如果该字符已经是“骆驼”命名法，则不变化。</p>

                        <div class="highlight">
                            <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">camelCase</span><span class="p">(</span><span class="s1">'hello-there'</span><span class="p">)</span> <span class="c1">//=&gt; "helloThere"</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">camelCase</span><span class="p">(</span><span class="s1">'helloThere'</span><span class="p">)</span>  <span class="c1">//=&gt; "helloThere"</span>
</code></pre>
                        </div>




                    </article>

                    <article class="method" id="$.contains">
                        <h3>$.contains

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.contains(parent, node) <span class="return"> ⇒ boolean
</span></code></pre>

                        <p>检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回 <code>false</code>。</p>

                    </article>

                    <article class="method" id="$.each">
                        <h3>$.each


                        </h3>


                        <pre class="signature"><code>$.each(collection, function(index, item){ ... }) <span class="return"> ⇒ collection
</span></code></pre>

                        <p>遍历数组元素或以key-value值对方式遍历对象。回调函数返回 <code>false</code> 时停止遍历。</p>

                        <div class="highlight">
                            <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">([</span><span class="s1">'a'</span><span class="p">,</span> <span class="s1">'b'</span><span class="p">,</span> <span class="s1">'c'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">item</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'item %d is: %s'</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="nx">item</span><span class="p">)</span>
<span class="p">})</span>

<span class="kd">var</span> <span class="nx">hash</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'zepto.js'</span><span class="p">,</span> <span class="nx">size</span><span class="o">:</span> <span class="s1">'micro'</span> <span class="p">}</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">hash</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'%s: %s'</span><span class="p">,</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span>
<span class="p">})</span>
</code></pre>
                        </div>




                    </article>

                    <article class="method" id="$.extend">
                        <h3>$.extend


                        </h3>


                        <pre class="signature"><code>$.extend(target, [source, [source2, ...]]) <span class="return"> ⇒ target</span>
$.extend(true, target, [source, ...]) <span class="return"> ⇒ target <span class="version">v1.0+</span>
</span></code></pre>


<p>通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。</p>
<p>默认情况下为，复制为浅拷贝（浅复制）。如果第一个参数为true表示深度拷贝（深度复制）。</p>

                        <div class="highlight">
                            <pre><code class="js"><span class="kd">var</span> <span class="nx">target</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">one</span><span class="o">:</span> <span class="s1">'patridge'</span> <span class="p">},</span>
    <span class="nx">source</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">two</span><span class="o">:</span> <span class="s1">'turtle doves'</span> <span class="p">}</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">target</span><span class="p">,</span> <span class="nx">source</span><span class="p">)</span>
<span class="c1">//=&gt; { one: 'patridge',</span>
<span class="c1">//     two: 'turtle doves' }</span>
</code></pre>
                        </div>




                    </article>

                    <article class="method" id="$.fn">
                        <h3>$.fn


                        </h3>

                        <p><code>Zepto.fn</code>是一个对象，它拥有Zepto对象上所有可用的方法，如 <a href="#addClass"><code>addClass()</code></a>， <a href="#attr"><code>attr()</code></a>，和其它方法。在这个对象添加一个方法，所有的Zepto对象上都能用到该方法。</p>

                        <p>这里有一个实现 Zepto 的 <a href="#empty"><code>empty()</code></a> 方法的例子：</p>


                        <div class="highlight">
                            <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">empty</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="k">this</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">''</span> <span class="p">})</span>
<span class="p">}</span>
</code></pre>
                        </div>




                    </article>

                    <article class="method" id="$.grep">
                        <h3>$.grep

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.grep(items, function(item){ ... }) <span class="return"> ⇒ array
</span></code></pre>

                        <p>获取一个新数组，新数组只包含回调函数中返回 ture 的数组项。</p>
                        <div class="highlight">
    <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">grep</span><span class="p">([1,2,3],</span><span class="kd">function</span><span class="p">(<span class="nx">item</span>){</span>
    <span class="k">return</span><span class="p"> item &gt; 1
});</span><span class="p"></span><span class="c1">//=&gt;[2,3]</span>
    </code>
</pre>
    </div>
                    </article>

                    <article class="method" id="$.inArray">
                        <h3>$.inArray

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.inArray(element, array, [fromIndex]) <span class="return"> ⇒ number
</span></code></pre>


                        <p>返回数组中指定元素的索引值（愚人码头注：以0为基数），如果没有找到该元素则返回<code>-1</code>。</p>
                        <p>愚人码头注：<code>[fromIndex]</code> 参数可选，表示从哪个索引值开始向后查找。</p>
                        <div class="highlight">
      <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">("abc",["bcd","abc","edf","aaa"</span><span class="p">]);</span><span class="p"></span><span class="c1">//=&gt;1</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">("abc",["bcd","abc","edf","aaa"</span><span class="p">],1);</span><span class="p"></span><span class="c1">//=&gt;1</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">("abc",["bcd","abc","edf","aaa"</span><span class="p">],2);</span><span class="p"></span><span class="c1">//=&gt;-1</span>
      </code>   </pre>
    </div>
                    </article>

                    <article class="method" id="$.isArray">
                        <h3>$.isArray


                        </h3>


                        <pre class="signature"><code>$.isArray(object) <span class="return"> ⇒ boolean
</span></code></pre>

                        <p>如果object是array，则返回ture。</p>

                    </article>

                    <article class="method" id="$.isFunction">
                        <h3>$.isFunction


                        </h3>


                        <pre class="signature"><code>$.isFunction(object) <span class="return"> ⇒ boolean
</span></code></pre>

                        <p>如果object是function，则返回ture。</p>

                    </article>

                    <article class="method" id="$.isPlainObject">
                        <h3>$.isPlainObject

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.isPlainObject(object) <span class="return"> ⇒ boolean
</span></code></pre>


                        <p>测试对象是否是&ldquo;纯粹&rdquo;的对象，这个对象是通过 对象常量（"{}"） 或者 <code>new Object</code> 创建的，如果是，则返回true。 </p>
                        <div class="highlight">
                            <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">isPlainObject</span><span class="p">({})</span>         <span class="c1">// =&gt; true</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">isPlainObject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Object</span><span class="p">)</span> <span class="c1">// =&gt; true</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">isPlainObject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Date</span><span class="p">)</span>   <span class="c1">// =&gt; false</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">isPlainObject</span><span class="p">(</span><span class="nb">window</span><span class="p">)</span>     <span class="c1">// =&gt; false</span>
</code></pre>
                        </div>




                    </article>

                    <article class="method" id="$.isWindow">
                        <h3>$.isWindow

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.isWindow(object) <span class="return"> ⇒ boolean
</span></code></pre>

                        <p>如果object参数是否为一个window对象，那么返回true。这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象，使用常规方法<code>obj === window</code>校验这些objects的时候会失败。</p>

                    </article>

                    <article class="method" id="$.map">
                        <h3>$.map


                        </h3>


                        <pre class="signature"><code>$.map(collection, function(item, index){ ... }) <span class="return"> ⇒ collection
</span></code></pre>


                        <p>通过遍历集合中的元素，返回通过迭代函数的全部结果，（愚人码头注：一个新数组）<code>null</code> 和 <code>undefined</code> 将被过滤掉。 </p>

                        <div class="highlight">
    <pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">map([1,2,3,4,5],</span><span class="kd">function</span><span class="p">(item,index){</span>
        if(item&gt;1){<span class="k">return</span><span class="k"></span><span class="p"></span><span class="nx"></span><span class="p"></span><span class="kd"></span><span class="p"></span><span class="k"></span><span class="p"></span><span class="nx"></span><span class="o"></span><span class="s1"></span><span class="p"> item*item;}
}</span><span class="nx">)</span><span class="nx"></span>; <span class="o"></span></code>
<code class="js"><span class="c1">// =&gt;[4, 9, 16, 25]</span></code>

<code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">map({"yao":1,"tai":2,"yang":3},</span><span class="kd">function</span><span class="p">(item,index){</span>
    if(item&gt;1){<span class="k">return</span><span class="k"></span><span class="p"></span><span class="nx"></span><span class="p"></span><span class="kd"></span><span class="p"></span><span class="k"></span><span class="p"></span><span class="nx"></span><span class="o"></span><span class="s1"></span><span class="p"> item*item;}
}</span><span class="nx">)</span><span class="nx"></span>; <span class="o"></span></code>
<code class="js"><span class="c1">// =&gt;[4, 9]</span></code></pre>
    </div>

                    </article>

                    <article class="method" id="$.parseJSON">
                        <h3>$.parseJSON

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.parseJSON(string) <span class="return"> ⇒ object
</span></code></pre>

                        <p>原生<code>JSON.parse</code>方法的别名。（愚人码头注：接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。）</p>

                    </article>

                    <article class="method" id="$.trim">
                        <h3>$.trim

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.trim(string) <span class="return"> ⇒ string
</span></code></pre>


                        <p>删除字符串首尾的空白符。类似String.prototype.trim()。</p>

                    </article>

                    <article class="method" id="$.type">
                        <h3>$.type

                            <span class="version">v1.0+</span>
                        </h3>


                        <pre class="signature"><code>$.type(object) <span class="return"> ⇒ string
</span></code></pre>

                        <p>获取JavaScript 对象的类型。可能的类型有： <code>null</code> <code>undefined</code> <code>boolean</code> <code>number</code>
        <code>string</code> <code>function</code> <code>array</code> <code>date</code> <code>regexp</code>
        <code>object</code> <code>error</code>。</p>

                        <p>对于其它对象，它只是简单报告为“object”，如果你想知道一个对象是否是一个javascript普通对象，使用 <a href="#$.isPlainObject">isPlainObject</a>。</p>

                    </article>

                    <article class="method" id="add">
                        <h3>add


                        </h3>


                        <pre class="signature"><code>add(selector, [context]) <span class="return"> ⇒ self
</span></code></pre>

                        <p>添加元素到当前匹配的元素集合中。如果给定content参数，将只在content元素中进行查找，否则在整个document中查找。</p>
<div class="highlight">
    <pre>&lt;ul&gt;
    &lt;li&gt;list item 1&lt;/li&gt;
    &lt;li&gt;list item 2&lt;/li&gt;
    &lt;li&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;a paragraph&lt;/p&gt;

&lt;script type="text/javascript"&gt;
    $('li').add('p').css('background-color', 'red');
&lt;/script&gt;</pre>
    </div>
                    </article>

                    <article class="method" id="addClass">
                        <h3>addClass


                        </h3>


                        <pre class="signature"><code>addClass(name) <span class="return"> ⇒ self</span>
addClass(function(index, oldClassName){ ... }) <span class="return"> ⇒ self
</span></code></pre>


                        <p>为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。</p>
                    </article>

                    <article class="method" id="after">
                        <h3>after


                        </h3>


                        <pre class="signature"><code>after(content) <span class="return"> ⇒ self</span></code></pre>
                        <p>在每个匹配的元素后插入内容（愚人码头注：外部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。 </p>
                        <pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'form label'</span><span class="p">).</span><span class="nx">after</span><span class="p">(</span><span class="s1">'&lt;p&gt;A note below the label&lt;/p&gt;'</span><span class="p">)</span>
</code></pre>




                    </article>



<article class="method" id="append">
  <h3>append


  </h3>


  <pre class="signature"><code>append(content) <span class="return"> ⇒ self
</span></code></pre>

<p>在每个匹配的元素末尾插入内容（愚人码头注：内部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'&lt;li&gt;new list item&lt;/li&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="appendTo">
  <h3>appendTo


  </h3>


  <pre class="signature"><code>appendTo(target) <span class="return"> ⇒ self
</span></code></pre>

<p>将匹配的元素插入到目标元素的末尾（愚人码头注：内部插入）。这个有点像 <a href="#append">append</a>，但是插入的目标与其相反。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;li&gt;new list item&lt;/li&gt;'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="attr">
  <h3>attr


  </h3>


  <pre class="signature"><code>attr(name) <span class="return"> ⇒ string</span>
attr(name, value) <span class="return"> ⇒ self</span>
attr(name, function(index, oldValue){ ... }) <span class="return"> ⇒ self</span>
attr({ name: value, name2: value2, ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>读取或设置dom的属性。如果没有给定value参数，则读取对象集合中第一个元素的属性值。当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为<code>null</code>，那么这个属性将被移除(类似<a href="#removeAttr">removeAttr</a>)，多个属性可以通过对象键值对的方式进行设置。
    </p>
<p>要读取DOM的属性如 <code>checked</code>和<code>selected</code>, 使用 <a href="#prop">prop</a>。</p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'form'</span><span class="p">)</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'action'</span><span class="p">)</span>             <span class="c1">//=&gt; 读取值</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'action'</span><span class="p">,</span> <span class="s1">'/create'</span><span class="p">)</span>  <span class="c1">//=&gt; 设置值</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'action'</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span>       <span class="c1">//=&gt; 移除属性</span>

<span class="c1">// 多个属性:</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">attr</span><span class="p">({</span>
  <span class="nx">action</span><span class="o">:</span> <span class="s1">'/create'</span><span class="p">,</span>
  <span class="nx">method</span><span class="o">:</span> <span class="s1">'post'</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="before">
  <h3>before


  </h3>


  <pre class="signature"><code>before(content) <span class="return"> ⇒ self
</span></code></pre>


<p>在匹配每个元素的前面插入内容（愚人码头注：外部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'table'</span><span class="p">).</span><span class="nx">before</span><span class="p">(</span><span class="s1">'&lt;p&gt;See the following table:&lt;/p&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="children">
  <h3>children


  </h3>


  <pre class="signature"><code>children([selector]) <span class="return"> ⇒ collection
</span></code></pre>

<p>获得每个匹配元素集合元素的直接子元素，如果给定selector，那么返回的结果中只包含符合css选择器的元素。 </p>
<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'ol'</span><span class="p">).</span><span class="nx">children</span><span class="p">(</span><span class="s1">'*:nth-child(2n)'</span><span class="p">)</span>
<span class="c1">//=&gt; every other list item from every ordered list</span>
</code></pre></div>




</article>

<article class="method" id="clone">
  <h3>clone

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>clone() <span class="return"> ⇒ collection
</span></code></pre>

  <p>通过深度克隆来复制集合中的所有元素。 </p>


<p class="compat">此方法不会将数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。</p>


</article>

<article class="method" id="closest">
  <h3>closest


  </h3>


  <pre class="signature"><code>closest(selector, [context]) <span class="return"> ⇒ collection</span>
closest(collection) <span class="return"> ⇒ collection <span class="version" title="This feature is only available in Zepto v1.0+">v1.0+</span></span>
closest(element) <span class="return"> ⇒ collection <span class="version">v1.0+</span>
</span></code></pre>


<p>从元素本身开始，逐级向上级元素匹配，并返回最先匹配selector的元素。如果给定context节点参数，那么只匹配该节点的后代元素。这个方法与
        <a href="#parents"><code>parents(selector)</code></a>有点相像，但它只返回最先匹配的祖先元素。</p>

<p>如果参数是一个Zepto对象集合或者一个元素，结果必须匹配给定的元素而不是选择器。 </p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'input[type=text]'</span><span class="p">)</span>
<span class="nx">input</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'form'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="concat">
  <h3>concat


  </h3>


  <pre class="signature"><code>concat(nodes, [node2, ...]) <span class="return"> ⇒ self
</span></code></pre>


<p>添加元素到一个Zepto对象集合形成一个新数组。如果参数是一个数组，那么这个数组中的元素将会合并到Zepto对象集合中。</p>

<p class="compat">这是一个Zepto提供的方法，不是jquey的API 。
    </p>


</article>

<article class="method" id="contents">
  <h3>contents

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>contents() <span class="return"> ⇒ collection
</span></code></pre>
<p>获得每个匹配元素集合元素的子元素，包括文字和注释节点。（愚人码头注：.contents()和<a href="#children">.children()</a>方法类似，只不过前者包括文本节点以及jQuery对象中产生的HTML元素。）
    </p>

</article>

<article class="method" id="css">
  <h3>css


  </h3>


  <pre class="signature"><code>css(property) <span class="return"> ⇒ value</span>
css([property1, property2, ...]) <span class="return"> ⇒ object <span class="version">v1.1+</span></span>
css(property, value) <span class="return"> ⇒ self</span>
css({ property: value, property2: value2, ... }) <span class="return"> ⇒ self
</span></code></pre>



<p>读取或设置DOM元素的css属性。当value参数不存在的时候，返回对象集合中第一个元素的css属性。当value参数存在时，设置对象集合中每一个元素的对应css属性。</p>

<p>

多个属性可以通过传递一个属性名组成的数组一次性获取。多个属性可以利用对象键值对的方式进行设置。
</p>

<p>当value为空(空字符串，<code>null</code> 或 <code>undefined</code>)，那个css属性将会被移出。当value参数为一个无单位的数字，如果该css属性需要单位，“px”将会自动添加到该属性上。
    </p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'h1'</span><span class="p">)</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'background-color'</span><span class="p">)</span>          <span class="c1">// read property</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'background-color'</span><span class="p">,</span> <span class="s1">'#369'</span><span class="p">)</span>  <span class="c1">// set property</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s1">'background-color'</span><span class="p">,</span> <span class="s1">''</span><span class="p">)</span>      <span class="c1">// remove property</span>

<span class="c1">// set multiple properties:</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span> <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">'#8EE'</span><span class="p">,</span> <span class="nx">fontSize</span><span class="o">:</span> <span class="mi">28</span> <span class="p">})</span>

<span class="c1">// read multiple properties:</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">css</span><span class="p">([</span><span class="s1">'backgroundColor'</span><span class="p">,</span> <span class="s1">'fontSize'</span><span class="p">])[</span><span class="s1">'fontSize'</span><span class="p">]</span>
</code></pre></div>




</article>

<article class="method" id="data">
    <h3>data


    </h3>


  <pre class="signature"><code>data(name) <span class="return"> ⇒ value</span>
data(name, value) <span class="return"> ⇒ self
</span></code></pre>

    <p>读取或写入dom的 <code>data-*</code> 属性。行为有点像 <a href="#attr">attr</a> ，但是属性名称前面加上
        <code>data-</code>。</p>

    <p>当读取属性值时，会有下列转换：<span class="version">v1.0+</span></p>
    <ul>
        <li>“true”, “false”, and “null” 被转换为相应的类型；</li>
        <li>数字值转换为实际的数字类型；</li>
        <li>JSON值将会被解析，如果它是有效的JSON；</li>
        <li>其它的一切作为字符串返回。
            <p class="compat">Zepto
                基本实现`data()`只能存储字符串。如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。 </p>
        </li>
    </ul>
</article>

<article class="method" id="each">
  <h3>each


  </h3>


  <pre class="signature"><code>each(function(index, item){ ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>遍历一个对象集合每个元素。在迭代函数中，<code>this</code>关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回 <code>false</code>，遍历结束。 </p>


<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'form input'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'input %d is: %o'</span><span class="p">,</span> <span class="nx">index</span><span class="p">,</span> <span class="k">this</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="empty">
  <h3>empty


  </h3>


  <pre class="signature"><code>empty() <span class="return"> ⇒ self
</span></code></pre>
  <p>清空对象集合中每个元素的DOM内容。</p>

</article>

<article class="method" id="eq">
  <h3>eq


  </h3>


  <pre class="signature"><code>eq(index) <span class="return"> ⇒ collection
</span></code></pre>


  <p>从当前对象集合中获取给定索引值（愚人码头注：以0为基数）的元素。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'li'</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>   <span class="c1">//=&gt; only the first list item</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'li'</span><span class="p">).</span><span class="nx">eq</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">)</span>  <span class="c1">//=&gt; only the last list item</span>
</code></pre></div>




</article>

<article class="method" id="filter">
  <h3>filter


  </h3>


  <pre class="signature"><code>filter(selector) <span class="return"> ⇒ collection</span>
filter(function(index){ ... }) <span class="return"> ⇒ collection <span class="version">v1.0+</span>
</span></code></pre>


<p>过滤对象集合，返回对象集合中满足css选择器的项。如果参数为一个函数，函数返回有实际值得时候，元素才会被返回。在函数中， <code>this</code> 关键字指向当前的元素。 </p>

<p>与此相反的功能，查看<a href="#not">not</a>.</p>
</article>

<article class="method" id="find">
  <h3>find


  </h3>


  <pre class="signature"><code>find(selector) <span class="return"> ⇒ collection</span>
find(collection) <span class="return"> ⇒ collection <span class="version">v1.0+</span></span>
find(element) <span class="return"> ⇒ collection <span class="version">v1.0+</span>
</span></code></pre>


<p>在当对象前集合内查找符合CSS选择器的每个元素的后代元素。 </p>
<p>如果给定Zepto对象集合或者元素，过滤它们，只有当它们在当前Zepto集合对象中时，才回被返回。 </p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myform'</span><span class="p">)</span>
<span class="nx">form</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input, select'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="first">
  <h3>first


  </h3>


  <pre class="signature"><code>first() <span class="return"> ⇒ collection
</span></code></pre>

  <p>获取当前对象集合中的第一个元素。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'form'</span><span class="p">).</span><span class="nx">first</span><span class="p">()</span>
</code></pre></div>




</article>

<article class="method" id="forEach">
  <h3>forEach


  </h3>


  <pre class="signature"><code>forEach(function(item, index, array){ ... }, [context]) <span class="return">
</span></code></pre>

<p>遍历对象集合中每个元素，有点类似 <a href="#each"> each</a>，但是遍历函数的参数不一样，当函数返回 <code>false</code> 的时候，遍历不会停止。 </p>

<p class="compat">
  这是一个Zepto提供的方法，不是jquery的API。
</p>


</article>

<article class="method" id="get">
  <h3>get


  </h3>


  <pre class="signature"><code>get() <span class="return"> ⇒ array</span>
get(index) <span class="return"> ⇒ DOM node
</span></code></pre>


<p>从当前对象集合中获取所有元素或单个元素。当index参数不存在的时，以普通数组的方式返回所有的元素。当指定index时，只返回该置的元素。这点与<a href="#eq">eq</a>不同，该方法返回的是DOM节点，不是Zepto对象集合。
    </p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'h2'</span><span class="p">)</span>
<span class="nx">elements</span><span class="p">.</span><span class="nx">get</span><span class="p">()</span>   <span class="c1">//=&gt; get all headings as an array</span>
<span class="nx">elements</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>  <span class="c1">//=&gt; get first heading node</span>
</code></pre></div>




</article>

<article class="method" id="has">
  <h3>has

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>has(selector) <span class="return"> ⇒ collection</span>
has(node) <span class="return"> ⇒ collection
</span></code></pre>

<p>判断当前对象集合的子元素是否有符合选择器的元素，或者是否包含指定的DOM节点，如果有，则返回新的对象集合，该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。 </p>


<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'ol &gt; li'</span><span class="p">).</span><span class="nx">has</span><span class="p">(</span><span class="s1">'a[href]'</span><span class="p">)</span>
<span class="c1">//=&gt; get only LI elements that contain links</span>
</code></pre></div>




</article>

<article class="method" id="hasClass">
  <h3>hasClass


  </h3>


  <pre class="signature"><code>hasClass(name) <span class="return"> ⇒ boolean
</span></code></pre>


  <p>检查对象集合中是否有元素含有指定的class。</p>
<div class="highlight">
    <pre>&lt;ul&gt;
    &lt;li&gt;list item 1&lt;/li&gt;
    &lt;li class="yaotaiyang"&gt;list item 2&lt;/li&gt;
    &lt;li&gt;list item 3&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;a paragraph&lt;/p&gt;

&lt;script type="text/javascript"&gt;
    $("li").hasClass("yaotaiyang");
<code class="js"><span class="c1">  //=&gt; true</span></code>
&lt;/script&gt;</pre>
    </div>
</article>

<article class="method" id="height">
  <h3>height


  </h3>


  <pre class="signature"><code>height() <span class="return"> ⇒ number</span>
height(value) <span class="return"> ⇒ self</span>
height(function(index, oldHeight){ ... }) <span class="return"> ⇒ self
</span></code></pre>


  <p>获取对象集合中第一个元素的高度；或者设置对象集合中所有元素的高度。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#foo'</span><span class="p">).</span><span class="nx">height</span><span class="p">()</span>   <span class="c1">// =&gt; 123</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">height</span><span class="p">()</span>   <span class="c1">// =&gt; 838 (viewport height)</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">height</span><span class="p">()</span> <span class="c1">// =&gt; 22302</span>
</code></pre></div>




</article>

<article class="method" id="hide">
  <h3>hide


  </h3>


  <pre class="signature"><code>hide() <span class="return"> ⇒ self
</span></code></pre>

  <p>Hide elements in this collection by setting their <code>display</code> CSS property to
<code>none</code>.</p>
<p>通过设置css的属性<code>display</code> 为 <code>none</code>来将对象集合中的元素隐藏。</p>

</article>

<article class="method" id="html">
  <h3>html


  </h3>


  <pre class="signature"><code>html() <span class="return"> ⇒ string</span>
html(content) <span class="return"> ⇒ self</span>
html(function(index, oldHtml){ ... }) <span class="return"> ⇒ self
</span></code></pre>



<p>获取或设置对象集合中元素的HTML内容。当没有给定content参数时，返回对象集合中第一个元素的innerHtml。当给定content参数时，用其替换对象集合中每个元素的内容。content可以是<a href="#append">append</a>中描述的所有类型。
    </p>

<div class="highlight"><pre><code class="js"><span class="c1">// autolink everything that looks like a Twitter username</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.comment p'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">idx</span><span class="p">,</span> <span class="nx">oldHtml</span><span class="p">){</span>
  <span class="k">return</span> <span class="nx">oldHtml</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(^|\W)@(\w{1,15})/g</span><span class="p">,</span>
    <span class="s1">'$1@&lt;a href="http://twitter.com/$2"&gt;$2&lt;/a&gt;'</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="index">
  <h3>index


  </h3>


  <pre class="signature"><code>index([element]) <span class="return"> ⇒ number
</span></code></pre>

<p>获取一个元素的索引值（愚人码头注：从0开始计数）。当elemen参数没有给出时，返回当前元素在兄弟节点中的位置。当element参数给出时，返回它在当前对象集合中的位置。如果没有找到该元素，则返回<code>-1</code>。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'li:nth-child(2)'</span><span class="p">).</span><span class="nx">index</span><span class="p">()</span>  <span class="c1">//=&gt; 1</span>
</code></pre></div>




</article>

<article class="method" id="indexOf">
  <h3>indexOf


  </h3>


  <pre class="signature"><code>indexOf(element, [fromIndex]) <span class="return"> ⇒ number
</span></code></pre>

  <p>Get the position of an element in the current collection. If fromIndex number is
given, search only from that position onwards. Returns the 0-based position when
found and <code>-1</code> if not found. Use of <a href="#index">index</a> is recommended over this
method.</p>

<p>在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。如果给定formindex参数，从该位置开始往后查找，返回基于0的索引值，如果没找到，则返回<code>-1</code>。<a href="#index">index</a> 方法是基于这个方法实现的。 </p>

<p class="compat">
  这是一个Zepto的方法，不是jquer的api。
</p>


</article>

<article class="method" id="insertAfter">
  <h3>insertAfter


  </h3>


  <pre class="signature"><code>insertAfter(target) <span class="return"> ⇒ self
</span></code></pre>

<p>将集合中的元素插入到指定的目标元素后面（愚人码头注：外部插入）。这个有点像 <a href="#after"> after</a>，但是使用方式相反。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;p&gt;Emphasis mine.&lt;/p&gt;'</span><span class="p">).</span><span class="nx">insertAfter</span><span class="p">(</span><span class="s1">'blockquote'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="insertBefore">
  <h3>insertBefore


  </h3>


  <pre class="signature"><code>insertBefore(target) <span class="return"> ⇒ self
</span></code></pre>

<p>将集合中的元素插入到指定的目标元素前面（愚人码头注：外部插入）。这个有点像 <a href="#before"> before</a>，但是使用方式相反。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;p&gt;See the following table:&lt;/p&gt;'</span><span class="p">).</span><span class="nx">insertBefore</span><span class="p">(</span><span class="s1">'table'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="is">
  <h3>is


  </h3>


  <pre class="signature"><code>is(selector) <span class="return"> ⇒ boolean
</span></code></pre>

<p>判断当前元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似： <code>:visible</code>包含在可选的“selector”模块中。 </p>

<p class="compat">
        <a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/">jQuery
            CSS extensions</a> 不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。</p>




</article>

<article class="method" id="last">
  <h3>last


  </h3>


  <pre class="signature"><code>last() <span class="return"> ⇒ collection
</span></code></pre>

  <p>获取对象集合中最后一个元素。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'li'</span><span class="p">).</span><span class="nx">last</span><span class="p">()</span>
</code></pre></div>




</article>

<article class="method" id="map">
  <h3>map


  </h3>


  <pre class="signature"><code>map(function(index, item){ ... }) <span class="return"> ⇒ collection
</span></code></pre>


<p>遍历对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中<code>this</code>关键之指向当前循环的项（遍历函数中的第二个参数）。</p>

<p>
遍历中返回 <code>null</code>和<code>undefined</code>，遍历将结束。
    </p>

<div class="highlight"><pre><code class="js"><span class="c1">// get text contents of all elements in collection</span>
<span class="nx">elements</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">text</span><span class="p">()</span> <span class="p">}).</span><span class="nx">get</span><span class="p">().</span><span class="nx">join</span><span class="p">(</span><span class="s1">', '</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="next">
  <h3>next


  </h3>


  <pre class="signature"><code>next() <span class="return"> ⇒ collection</span>
next(selector) <span class="return"> ⇒ collection <span class="version">v1.0+</span>
</span></code></pre>

  <p>Get the next sibling–optionally filtered by selector–of each element in the
collection.</p>

<p>获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'dl dt'</span><span class="p">).</span><span class="nx">next</span><span class="p">()</span>   <span class="c1">//=&gt; the DD elements</span>
</code></pre></div>




</article>

<article class="method" id="not">
  <h3>not


  </h3>


  <pre class="signature"><code>not(selector) <span class="return"> ⇒ collection</span>
not(collection) <span class="return"> ⇒ collection</span>
not(function(index){ ... }) <span class="return"> ⇒ collection
</span></code></pre>


<p>过滤当前对象集合，获取一个新的对象集合，它里面的元素不能匹配css选择器。如果另一个参数为Zepto对象集合，那么返回的新Zepto对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素，函数的
        <code>this</code> 关键字指向当前循环元素。</p>


<p>与它相反的功能，查看 <a href="#filter">filter</a>.</p>

</article>

<article class="method" id="offset">
  <h3>offset


  </h3>


  <pre class="signature"><code>offset() <span class="return"> ⇒ object</span>
offset(coordinates) <span class="return"> ⇒ self <span class="version">v1.0+</span></span>
offset(function(index, oldOffset){ ... }) <span class="return"> ⇒ self <span class="version">v1.0+</span>
</span></code></pre>


<p>获得当前元素相对于document的位置。返回一个对象含有：
        <code>top</code>, <code>left</code>, <code>width</code>和<code>height</code></p>
<p>当给定一个含有<code>left</code>和<code>top</code>属性对象时，使用这些值来对集合中每一个元素进行相对于document的定位。</p>

</article>

<article class="method" id="offsetParent">
  <h3>offsetParent

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>offsetParent() <span class="return"> ⇒ collection
</span></code></pre>

<p>找到第一个定位过的祖先元素，意味着它的css中的<code>position</code> 属性值为“relative”, “absolute” or “fixed”
    </p>

</article>

<article class="method" id="parent">
  <h3>parent


  </h3>


  <pre class="signature"><code>parent([selector]) <span class="return"> ⇒ collection
</span></code></pre>


<p>获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。</p>
</article>

<article class="method" id="parents">
  <h3>parents


  </h3>


  <pre class="signature"><code>parents([selector]) <span class="return"> ⇒ collection
</span></code></pre>


<p>获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。</p>
<p>如果想获取直接父级元素，使用 <a href="#parent">parent</a>。如果只想获取到第一个符合css选择器的元素，使用<a href="#closest">closest</a>。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'h1'</span><span class="p">).</span><span class="nx">parents</span><span class="p">()</span>   <span class="c1">//=&gt; [&lt;div#container&gt;, &lt;body&gt;, &lt;html&gt;]</span>
</code></pre></div>




</article>

<article class="method" id="pluck">
  <h3>pluck


  </h3>


  <pre class="signature"><code>pluck(property) <span class="return"> ⇒ array
</span></code></pre>


<p>获取对象集合中每一个元素的属性值。返回值为 <code>null</code>或<code>undefined</code>值得过滤掉。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body &gt; *'</span><span class="p">).</span><span class="nx">pluck</span><span class="p">(</span><span class="s1">'nodeName'</span><span class="p">)</span> <span class="c1">// =&gt; ["DIV", "SCRIPT"]</span>

<span class="c1">// implementation of Zepto's `next` method</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">next</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
  <span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="s1">'nextElementSibling'</span><span class="p">))</span>
<span class="p">}</span>
</code></pre></div>




<p class="compat">
  这是一个Zepto的方法，不是jquery的api
</p>


</article>

<article class="method" id="position">
  <h3>position

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>position() <span class="return"> ⇒ object
</span></code></pre>

<p>获取对象集合中第一个元素的位置。相对于
        <a href="#offsetParent">offsetParent</a>。当绝对定位的一个元素靠近另一个元素的时候，这个方法是有用的。 </p>

<p>Returns an object with properties: <code>top</code>, <code>left</code>.</p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">pos</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">position</span><span class="p">()</span>

<span class="c1">// position a tooltip relative to the element</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#tooltip'</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span>
  <span class="nx">position</span><span class="o">:</span> <span class="s1">'absolute'</span><span class="p">,</span>
  <span class="nx">top</span><span class="o">:</span> <span class="nx">pos</span><span class="p">.</span><span class="nx">top</span> <span class="o">-</span> <span class="mi">30</span><span class="p">,</span>
  <span class="nx">left</span><span class="o">:</span> <span class="nx">pos</span><span class="p">.</span><span class="nx">left</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="prepend">
  <h3>prepend


  </h3>


  <pre class="signature"><code>prepend(content) <span class="return"> ⇒ self
</span></code></pre>

<p>将参数内容插入到每个匹配元素的前面（愚人码头注：元素内部插入）。插入d的元素可以试html字符串片段，一个dom节点，或者一个节点的数组。</p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">).</span><span class="nx">prepend</span><span class="p">(</span><span class="s1">'&lt;li&gt;first list item&lt;/li&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="prependTo">
  <h3>prependTo


  </h3>


  <pre class="signature"><code>prependTo(target) <span class="return"> ⇒ self
</span></code></pre>

<p>将所有元素插入到目标前面（愚人码头注：元素内部插入）。这有点像<a href="#prepend">prepend</a>，但是是相反的方式。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;li&gt;first list item&lt;/li&gt;'</span><span class="p">).</span><span class="nx">prependTo</span><span class="p">(</span><span class="s1">'ul'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="prev">
  <h3>prev


  </h3>


  <pre class="signature"><code>prev() <span class="return"> ⇒ collection</span>
prev(selector) <span class="return"> ⇒ collection <span class="version">v1.0+</span>
</span></code></pre>

<p>获取对象集合中每一个元素的前一个兄弟节点，通过选择器来进行过滤。</p>

</article>

<article class="method" id="prop">
  <h3>prop

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>prop(name) <span class="return"> ⇒ value</span>
prop(name, value) <span class="return"> ⇒ self</span>
prop(name, function(index, oldValue){ ... }) <span class="return"> ⇒ self
</span></code></pre>



<p>读取或设置dom元素的属性值。它在读取属性值的情况下优先于 <a href="#attr">attr</a>，因为这些属性值会因为用户的交互发生改变，如<code>checked</code> 和
        <code>selected</code>。 </p>

<p>简写或小写名称，比如<code>for</code>, <code>class</code>, <code>readonly</code>及类似的属性，将被映射到实际的属性上，比如<code>htmlFor</code>, <code>className</code>, <code>readOnly</code>, 等等。</p>

</article>

<article class="method" id="push">
  <h3>push


  </h3>


  <pre class="signature"><code>push(element, [element2, ...]) <span class="return"> ⇒ self
</span></code></pre>

  <p>Add elements to the end of the current collection.</p>
<p>添加元素到当前对象集合的最后。 </p>
<p class="compat">
  这是一个zepto的方法，不是jquery的api
</p>


</article>

<article class="method" id="ready">
  <h3>ready


  </h3>


  <pre class="signature"><code>ready(function($){ ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>添加一个事件侦听器，当页面DOM加载完毕 “DOMContentLoaded” 事件触发时触发。建议使用 <a href="#$()">$()</a>来代替这种用法。</p>

</article>

<article class="method" id="reduce">
  <h3>reduce


  </h3>


  <pre class="signature"><code>reduce(function(memo, item, index, array){ ... }, [initial]) <span class="return"> ⇒ value
</span></code></pre>

  <p>与 <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/Reduce">Array.reduce</a>有相同的用法，遍历当前对象集合。memo是函数上次的返回值。迭代进行遍历。
    </p>

<p class="compat">
  这是一个zepto的方法，不是jquery的api
</p>




</article>

<article class="method" id="remove">
  <h3>remove


  </h3>


  <pre class="signature"><code>remove() <span class="return"> ⇒ self
</span></code></pre>

  <p>
从其父节点中删除当前集合中的元素，有效的从dom中移除。
</p>

</article>

<article class="method" id="removeAttr">
  <h3>removeAttr


  </h3>


  <pre class="signature"><code>removeAttr(name) <span class="return"> ⇒ self
</span></code></pre>

  <p>移除当前对象集合中所有元素的指定属性。</p>

</article>

<article class="method" id="removeClass">
  <h3>removeClass


  </h3>


  <pre class="signature"><code>removeClass([name]) <span class="return"> ⇒ self</span>
removeClass(function(index, oldClassName){ ... }) <span class="return"> ⇒ self
</span></code></pre>


<p>移除当前对象集合中所有元素的指定class。如果没有指定name参数，将移出所有的class。多个class参数名称可以利用空格分隔。下例移除了两个class。</p>
<div class="highlight">
    <pre>&lt;input class="taiyang yueliang" id="check1" type="checkbox" checked="checked"&gt;<br>&lt;input class="yaotaiyang" id="check2" type="checkbox"&gt;

&lt;script type="text/javascript"&gt;
    $("#check1").removeClass("taiyang yueliang")
    <code class="js"><span class="c1">//=&gt;[&lt;input class id="check1" type="checkbox" checked="checked"&gt;]</span></code><code class="js"><span class="c1"></span></code>
&lt;/script&gt;</pre>
    </div>
</article>

<article class="method" id="replaceWith">
  <h3>replaceWith


  </h3>


  <pre class="signature"><code>replaceWith(content) <span class="return"> ⇒ self
</span></code></pre>

<p>用给定的内容替换所有匹配的元素。(包含元素本身)。content参数可以为
        <a href="#before">before</a>中描述的类型。</p>

</article>

<article class="method" id="scrollLeft">
  <h3>scrollLeft

  <span class="version">v1.1+</span>
  </h3>


  <pre class="signature"><code>scrollLeft() <span class="return"> ⇒ number</span>
scrollLeft(value) <span class="return"> ⇒ self
</span></code></pre>


<p>获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。</p>

</article>

<article class="method" id="scrollTop">
  <h3>scrollTop

  <span class="version">v1.0+</span>
  </h3>


  <pre class="signature"><code>scrollTop() <span class="return"> ⇒ number</span>
scrollTop(value) <span class="return"> ⇒ self <span class="version">v1.1+</span>
</span></code></pre>


<p>获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。</p>

</article>

<article class="method" id="show">
  <h3>show


  </h3>


  <pre class="signature"><code>show() <span class="return"> ⇒ self
</span></code></pre>

<p>恢复对象集合中每个元素默认的“display”值。如果你用 <a href="#hide">hide</a>将元素隐藏，用该属性可以将其显示。相当于去掉了<code>display：none</code>。</p>

</article>

<article class="method" id="siblings">
  <h3>siblings


  </h3>


  <pre class="signature"><code>siblings([selector]) <span class="return"> ⇒ collection
</span></code></pre>


<p>获取对象集合中所有元素的兄弟节点。如果给定CSS选择器参数，过滤出符合选择器的元素。</p>
</article>

<article class="method" id="size">
  <h3>size


  </h3>


  <pre class="signature"><code>size() <span class="return"> ⇒ number
</span></code></pre>
<p>获取对象集合中元素的数量。</p>
</article>

<article class="method" id="slice">
  <h3>slice


  </h3>


  <pre class="signature"><code>slice(start, [end]) <span class="return"> ⇒ array
</span></code></pre>


<p>提取这个数组<code>array</code>的子集，从<code>start</code>开始，如果给定<code>end</code>，提取从从<code>start</code>开始到<code>end</code>结束的元素，但是不包含<code>end</code>位置的元素。</p>

</article>

<article class="method" id="text">
  <h3>text


  </h3>


<pre class="signature"><code>text() <span class="return"> ⇒ string</span>
text(content) <span class="return"> ⇒ self</span>
text(function(index, oldText){ ... }) <span class="return"> ⇒ self <span class="version">v1.1.4+</span>
</span></code></pre>
  <p>获取或者设置所有对象集合中元素的文本内容。当没有给定content参数时，返回当前对象集合中第一个元素的文本内容（包含子节点中的文本内容）。当给定content参数时，使用它替换对象集合中所有元素的文本内容。它有待点似
        <a href="#html">html</a>，与它不同的是它不能用来获取或设置 HTML。</p>

</article>

<article class="method" id="toggle">
  <h3>toggle


  </h3>


  <pre class="signature"><code>toggle([setting]) <span class="return"> ⇒ self
</span></code></pre>


<p>显示或隐藏匹配元素。如果 <code>setting</code>为true，相当于<a href="#show">show</a> 法。如果<code>setting</code>为false。相当于
        <a href="#hide">hide</a>方法。 </p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'input[type=text]'</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#too_long'</span><span class="p">).</span><span class="nx">toggle</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">().</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">140</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="toggleClass">
  <h3>toggleClass


  </h3>


  <pre class="signature"><code>toggleClass(names, [setting]) <span class="return"> ⇒ self</span>
toggleClass(function(index, oldClassNames){ ... }, [setting]) <span class="return"> ⇒ self
</span></code></pre>



<p>在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它，如果不存在，就添加它。如果 <code>setting</code>的值为真，这个功能类似于
        <a href="#addClass">addClass</a>，如果为假，这个功能类似与 <a href="#removeClass">removeClass</a>。</p>

</article>

<article class="method" id="unwrap">
  <h3>unwrap


  </h3>


  <pre class="signature"><code>unwrap() <span class="return"> ⇒ self
</span></code></pre>

<p>移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置。
基本上，这种方法删除上一的祖先元素，同时保持DOM中的当前元素。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s1">'&lt;div id=wrapper&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;'</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#wrapper p'</span><span class="p">).</span><span class="nx">unwrap</span><span class="p">().</span><span class="nx">parents</span><span class="p">()</span>  <span class="c1">//=&gt; [&lt;body&gt;, &lt;html&gt;]</span>
</code></pre></div>




</article>

<article class="method" id="val">
  <h3>val


  </h3>


  <pre class="signature"><code>val() <span class="return"> ⇒ string</span>
val(value) <span class="return"> ⇒ self</span>
val(function(index, oldValue){ ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>获取或设置匹配元素的值。当没有给定value参数，返回第一个元素的值。如果是<code>&lt;select multiple&gt;</code>标签，则返回一个数组。当给定value参数，那么将设置所有元素的值。</p>

</article>

<article class="method" id="width">
  <h3>width


  </h3>


  <pre class="signature"><code>width() <span class="return"> ⇒ number</span>
width(value) <span class="return"> ⇒ self</span>
width(function(index, oldWidth){ ... }) <span class="return"> ⇒ self
</span></code></pre>

  <p>获取对象集合中第一个元素的宽；或者设置对象集合中所有元素的宽。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#foo'</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span>   <span class="c1">// =&gt; 123</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span>   <span class="c1">// =&gt; 768 (viewport width)</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">width</span><span class="p">()</span> <span class="c1">// =&gt; 768 </span>
</code></pre></div>




</article>

<article class="method" id="wrap">
  <h3>wrap


  </h3>


  <pre class="signature"><code>wrap(structure) <span class="return"> ⇒ self</span>
wrap(function(index){ ... }) <span class="return"> ⇒ self <span class="version">v1.0+</span>
</span></code></pre>


<p>在每个匹配的元素外层包上一个html元素。structure参数可以是一个单独的元素或者一些嵌套的元素。也可以是一个html字符串片段或者dom节点。还可以是一个生成用来包元素的回调函数，这个函数返回前两种类型的包裹片段。 </p>
<p><strong>需要提醒的是：</strong>该方法对于dom中的节点有着很好的支持。如果将<code>wrap()</code> 用在一个新的元素上，然后再将结果插入到document中，此时该方法无效。 </p>


<div class="highlight"><pre><code class="js"><span class="c1">// wrap each button in a separate span:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.buttons a'</span><span class="p">).</span><span class="nx">wrap</span><span class="p">(</span><span class="s1">'&lt;span&gt;'</span><span class="p">)</span>

<span class="c1">// wrap each code block in a div and pre:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'code'</span><span class="p">).</span><span class="nx">wrap</span><span class="p">(</span><span class="s1">'&lt;div class=highlight&gt;&lt;pre /&gt;&lt;/div&gt;'</span><span class="p">)</span>

<span class="c1">// wrap all form inputs in a span with classname</span>
<span class="c1">// corresponding to input type:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'input'</span><span class="p">).</span><span class="nx">wrap</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">){</span>
  <span class="k">return</span> <span class="s1">'&lt;span class='</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">type</span> <span class="o">+</span> <span class="s1">'field /&gt;'</span>
<span class="p">})</span>
<span class="c1">//=&gt; &lt;span class=textfield&gt;&lt;input type=text /&gt;&lt;/span&gt;,</span>
<span class="c1">//   &lt;span class=searchfield&gt;&lt;input type=search /&gt;&lt;/span&gt;</span>

<span class="c1">// WARNING: will not work as expected!</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;em&gt;broken&lt;/em&gt;'</span><span class="p">).</span><span class="nx">wrap</span><span class="p">(</span><span class="s1">'&lt;li&gt;'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
<span class="c1">// do this instead:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'&lt;em&gt;better&lt;/em&gt;'</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">wrap</span><span class="p">(</span><span class="s1">'&lt;li&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="wrapAll">
  <h3>wrapAll


  </h3>


  <pre class="signature"><code>wrapAll(structure) <span class="return"> ⇒ self
</span></code></pre>

<p>在所有匹配元素外面包一个单独的结构。结构可以是单个元素或
几个嵌套的元素，并且可以通过在作为HTML字符串或DOM节点。 </p>

<div class="highlight"><pre><code class="js"><span class="c1">// wrap all buttons in a single div:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'a.button'</span><span class="p">).</span><span class="nx">wrapAll</span><span class="p">(</span><span class="s1">'&lt;div id=buttons /&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="wrapInner">
  <h3>wrapInner


  </h3>


  <pre class="signature"><code>wrapInner(structure) <span class="return"> ⇒ self</span>
wrapInner(function(index){ ... }) <span class="return"> ⇒ self <span class="version">v1.0+</span>
</span></code></pre>

  <p>

将每个元素中的<em>内容</em>包裹在一个单独的结构中。结构可以是单个元件或多个嵌套元件，并且可以通过在作为HTML字符串或DOM节点，或者是一个生成用来包元素的回调函数，这个函数返回前两种类型的包裹片段。
</p>

<div class="highlight"><pre><code class="js"><span class="c1">// wrap the contents of each navigation link in a span:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'nav a'</span><span class="p">).</span><span class="nx">wrapInner</span><span class="p">(</span><span class="s1">'&lt;span&gt;'</span><span class="p">)</span>

<span class="c1">// wrap the contents of each list item in a paragraph and emphasis:</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'ol li'</span><span class="p">).</span><span class="nx">wrapInner</span><span class="p">(</span><span class="s1">'&lt;p&gt;&lt;em /&gt;&lt;/p&gt;'</span><span class="p">)</span>
</code></pre></div>




</article>



    <hr>
    <h2 id="detect">Detect methods</h2>


<article class="method" id="Detect module">
  <h3>Detect module


  </h3>

  <p>该检测方法可以在不同的环境中微调你的站点或者应用程序，并帮助你识别手机和平板；以及不同的浏览器和操作系统。 </p>

<div class="highlight"><pre><code class="js"><span class="c1">// The following boolean flags are set to true if they apply,</span>
<span class="c1">// if not they're either set to `false` or `undefined`.</span>
<span class="c1">// We recommend accessing them with `!!` prefixed to coerce to a boolean. </span>

<span class="c1">// general device type</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">phone</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">tablet</span>

<span class="c1">// specific OS</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">ios</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">android</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">webos</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">blackberry</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">bb10</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">rimtabletos</span>

<span class="c1">// specific device type</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">iphone</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">ipad</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">ipod</span> <span class="c1">// [v1.1]</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">touchpad</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">kindle</span>

<span class="c1">// specific browser</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">chrome</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">firefox</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">safari</span> <span class="c1">// [v1.1]</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">webview</span> <span class="c1">// (iOS) [v1.1]</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">silk</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">playbook</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">ie</span> <span class="c1">// [v1.1]</span>

<span class="c1">// 此外，版本信息是可用的。</span>
<span class="c1">// 下面是运行​​iOS 6.1的iPhone所返回的。</span>
<span class="o">!!</span><span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">phone</span>         <span class="c1">// =&gt; true</span>
<span class="o">!!</span><span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">iphone</span>        <span class="c1">// =&gt; true</span>
<span class="o">!!</span><span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">ios</span>           <span class="c1">// =&gt; true</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">os</span><span class="p">.</span><span class="nx">version</span>       <span class="c1">// =&gt; "6.1"</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">browser</span><span class="p">.</span><span class="nx">version</span>  <span class="c1">// =&gt; "536.26"</span>
</code></pre></div>




</article>



    <hr>
    <h2 id="event">事件处理</h2>


<article class="method" id="$.Event">
  <h3>$.Event


  </h3>


  <pre class="signature"><code>$.Event(type, [properties]) <span class="return"> ⇒ event
</span></code></pre>

<p>创建并初始化一个指定的DOM事件。如果给定properties对象，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置<code>bubbles</code>为<code>false</code>来关闭。
    </p>
<p>一个事件初始化的函数可以使用
        <a href="#trigger">trigger</a>来触发。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s1">'mylib:change'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">bubbles</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="$.proxy">
  <h3>$.proxy

  <span class="version">v1.0+</span>
  </h3>

<pre class="signature"><code>$.proxy(fn, context) <span class="return"> ⇒ function</span>
$.proxy(fn, context, [additionalArguments...]) <span class="return"> ⇒ function <span class="version">v1.1.4+</span></span>
$.proxy(context, property) <span class="return"> ⇒ function</span>
$.proxy(context, property, [additionalArguments...]) <span class="return"> ⇒ function <span class="version">v1.1.4+</span>
</span></code></pre>

<p>接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文(context)语境，新函数中<code>this</code>指向context参数。另外一种形式，原始的function是从上下文(context)对象的特定属性读取。 </p>

<p>如果传递超过2个的额外参数，它们被用于 传递给fn参数的函数 引用。</p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">'Zepto'</span><span class="p">},</span>
    <span class="nx">handler</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"hello from + "</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span> <span class="p">}</span>

<span class="c1">// ensures that the handler will be executed in the context of `obj`:</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="nx">$</span><span class="p">.</span><span class="nx">proxy</span><span class="p">(</span><span class="nx">handler</span><span class="p">,</span> <span class="nx">obj</span><span class="p">))</span>
</code></pre></div>




</article>

<article class="method" id="bind">
  <h3>bind
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    不推荐, 使用 <a href="#on">on</a> 代替。
  </p>


  <pre class="signature"><code>bind(type, function(e){ ... }) <span class="return"> ⇒ self</span>
bind(type, [data], function(e){ ... }) <span class="return"> ⇒ self <span class="version">v1.1+</span></span>
bind({ type: handler, type2: handler2, ... }) <span class="return"> ⇒ self</span>
bind({ type: handler, type2: handler2, ... }, [data]) <span class="return"> ⇒ self <span class="version">v1.1+</span>
</span></code></pre>

  <p>为一个元素绑定一个处理事件。</p>

</article>

<article class="method" id="delegate">
  <h3>delegate
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    不推荐, 使用 <a href="#on">on</a> 代替。
  </p>


  <pre class="signature"><code>delegate(selector, type, function(e){ ... }) <span class="return"> ⇒ self</span>
delegate(selector, { type: handler, type2: handler2, ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>基于一组特定的根元素为所有选择器匹配的元素附加一个处理事件，匹配的元素可能现在或将来才创建。</p>

</article>

<article class="method" id="die">
  <h3>die
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    不推荐, 使用 <a href="#on">on</a> 代替。
  </p>


  <pre class="signature"><code>die(type, function(e){ ... }) <span class="return"> ⇒ self</span>
die({ type: handler, type2: handler2, ... }) <span class="return"> ⇒ self
</span></code></pre>

  <p>删除通过 <a href="#live">live</a> 添加的事件。</p>

</article>

<article class="method" id="event.isDefaultPrevented">
  <h3>event.isDefaultPrevented

  <span class="version">v1.1+</span>
  </h3>


  <pre class="signature"><code>event.isDefaultPrevented() <span class="return"> ⇒ boolean
</span></code></pre>

  <p>
如果<code>preventDefault()</code>被该事件的实例调用，那么返回true。
这可作为跨平台的替代原生的<code> defaultPrevented</code>属性，如果<code> defaultPrevented</code>缺失或在某些浏览器下不可靠的时候。
</p>


<div class="highlight"><pre><code class="js"><span class="c1">// trigger a custom event and check whether it was cancelled</span>
<span class="kd">var</span> <span class="nx">event</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Event</span><span class="p">(</span><span class="s1">'custom'</span><span class="p">)</span>
<span class="nx">element</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">isDefaultPrevented</span><span class="p">()</span>
</code></pre></div>




</article>

<article class="method" id="event.isImmediatePropagationStopped">
  <h3>event.isImmediatePropagationStopped

  <span class="version">v1.1+</span>
  </h3>


  <pre class="signature"><code>event.isImmediatePropagationStopped() <span class="return"> ⇒ boolean
</span></code></pre>

  <p>
如果<code>stopImmediatePropagation()</code>被该事件的实例调用，那么返回true。Zepto在不支持该原生方法的浏览器中实现它，

 （例如老版本的Android）。</p>

</article>

<article class="method" id="event.isPropagationStopped">
  <h3>event.isPropagationStopped

  <span class="version">v1.1+</span>
  </h3>


  <pre class="signature"><code>event.isPropagationStopped() <span class="return"> ⇒ boolean
</span></code></pre>
  <p>
如果<code>stopPropagation()</code>被该事件的实例调用，那么返回true。</p>

</article>

<article class="method" id="live">
  <h3>live
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    不推荐, 使用 <a href="#on">on</a> 代替。
  </p>


  <pre class="signature"><code>live(type, function(e){ ... }) <span class="return"> ⇒ self</span>
live({ type: handler, type2: handler2, ... }) <span class="return"> ⇒ self
</span></code></pre>

<p>类似<a href="#delegate">delegate</a>，添加一个个事件处理器到符合目前选择器的所有元素匹配，匹配的元素可能现在或将来才创建。</p>

</article>

<article class="method" id="off">
  <h3>off


  </h3>


  <pre class="signature"><code>off(type, [selector], function(e){ ... }) <span class="return"> ⇒ self</span>
off({ type: handler, type2: handler2, ... }, [selector]) <span class="return"> ⇒ self</span>
off(type, [selector]) <span class="return"> ⇒ self</span>
off() <span class="return"> ⇒ self
</span></code></pre>

<p>移除通过 <a href="#on">on</a> 添加的事件.移除一个特定的事件处理程序，
必须通过用<code>on()</code>添加的那个相同的函数。否则，只通过事件类型调用此方法将移除该类型的所有处理程序。如果没有参数，将移出当前元素上<em>全部</em>的注册事件。</p>

</article>

<article class="method" id="on">
  <h3>on


  </h3>


  <pre class="signature"><code>on(type, [selector], function(e){ ... }) <span class="return"> ⇒ self</span>
on(type, [selector], [data], function(e){ ... }) <span class="return"> ⇒ self <span class="version">v1.1+</span></span>
on({ type: handler, type2: handler2, ... }, [selector]) <span class="return"> ⇒ self</span>
on({ type: handler, type2: handler2, ... }, [selector], [data]) <span class="return"> ⇒ self <span class="version">v1.1+</span>
</span></code></pre>


<p>添加事件处理程序到对象集合中得元素上。多个事件可以通过空格的字符串方式添加，或者以事件类型为键、以函数为值的对象 方式。如果给定css选择器，当事件在匹配该选择器的元素上发起时，事件才会被触发（愚人码头注：即事件委派，或者说事件代理）。 </p>

<p>如果给定<code>data</code>参数，这个值将在事件处理程序执行期间被作为有用的
<code> event.data </code>属性</p>


<p>
    事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(愚人码头注：this指向触发事件的元素)。

当一个事件处理程序返回<code>false</code>，<code>preventDefault()</code> 和 <code>stopPropagation()</code>被当前事件调用的情况下，
 将防止默认浏览器操作，如链接。
</p>



<p>
如果<code>false</code> 在回调函数的位置上作为参数传递给这个方法，
它相当于传递一个函数，这个函数直接返回<code>false</code>。（愚人码头注：即将 <code>false</code> 当作 <code>function(e){ ... }</code> 的参数，作为 <code>function(){ return false; }</code> 的简写形式，例如： <code>$("a.disabled").on("click", false);</code>这相当于<code>$("a.disabled").on("click", function(){ return false; } );</code>）

</p>

<div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#content'</span><span class="p">)</span>
<span class="c1">// observe all clicks inside #content:</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> <span class="p">...</span> <span class="p">})</span>
<span class="c1">// observe clicks inside navigation links in #content</span>
<span class="nx">elem</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="s1">'nav a'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> <span class="p">...</span> <span class="p">})</span>
<span class="c1">// all clicks inside links in the document</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="s1">'a'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> <span class="p">...</span> <span class="p">})</span>
<span class="c1">// disable following any navigation link on the page</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="s1">'nav a'</span><span class="p">,</span> <span class="kc">false</span><span class="p">)</span>
</code></pre></div>




</article>

<article class="method" id="one">
  <h3>one


  </h3>


  <pre class="signature"><code>one(type, [selector], function(e){ ... }) <span class="return"> ⇒ self</span>
one(type, [selector], [data], function(e){ ... }) <span class="return"> ⇒ self <span class="version">v1.1+</span></span>
one({ type: handler, type2: handler2, ... }, [selector]) <span class="return"> ⇒ self</span>
one({ type: handler, type2: handler2, ... }, [selector], [data]) <span class="return"> ⇒ self <span class="version">v1.1+</span>
</span></code></pre>

<p>添加一个处理事件到元素，当第一次执行事件以后，该事件将自动解除绑定，保证处理函数在每个元素上最多执行一次。<code>selector</code> 和 <code>data</code> 等参数说明请查看<a href="#on"><code>.on()</code></a>。</p>

</article>

<article class="method" id="trigger">
  <h3>trigger


  </h3>


  <pre class="signature"><code>trigger(event, [args]) <span class="return"> ⇒ self
</span></code></pre>


<p>在对象集合的元素上触发指定的事件。事件可以是一个字符串类型，也可以是一个 通过<a href="#$.Event">$.Event</a> 定义的事件对象。如果给定args参数，它会作为参数传递给事件函数。 </p>

<div class="highlight"><pre><code class="js"><span class="c1">// add a handler for a custom event</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'mylib:change'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">from</span><span class="p">,</span> <span class="nx">to</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'change on %o with data %s, %s'</span><span class="p">,</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">,</span> <span class="nx">from</span><span class="p">,</span> <span class="nx">to</span><span class="p">)</span>
<span class="p">})</span>
<span class="c1">// trigger the custom event</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'mylib:change'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'one'</span><span class="p">,</span> <span class="s1">'two'</span><span class="p">])</span>
</code></pre></div>




<p class="compat">
  Zepto仅仅支持在dom元素上触发事件。
</p>


</article>

<article class="method" id="triggerHandler">
  <h3>triggerHandler


  </h3>


  <pre class="signature"><code>triggerHandler(event, [args]) <span class="return"> ⇒ self
</span></code></pre>


<p>像 <a href="#trigger">trigger</a>，它只在当前元素上触发事件，但不冒泡。</p>
<div class="highlight">
    <pre><code class="js">
        <span class="nx">$</span><span class="p">(</span><span class="nb">"input"</span><span class="p">).</span><span class="nx">triggerHandler</span><span class="p">(</span><span class="s1">'focus'</span><span class="p"></span><span class="p">)</span>;
        <span class="c1">// 此时input上的focus事件触发，但是input不会获取焦点</span><span class="nx">
        $</span><span class="p">(</span><span class="nb">"input"</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'focus'</span><span class="p"></span><span class="p">)</span>;
        <span class="c1">// 此时input上的focus事件触发，input获取焦点</span></code></pre>
    </div>
</article>

<article class="method" id="unbind">
  <h3>unbind
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    Deprecated, use <a href="#off">off</a> instead.
  </p>


  <pre class="signature"><code>unbind(type, function(e){ ... }) <span class="return"> ⇒ self</span>
unbind({ type: handler, type2: handler2, ... }) <span class="return"> ⇒ self
</span></code></pre>

  <p>移除通过 <a href="#bind">bind</a> 注册的事件。</p>

</article>

<article class="method" id="undelegate">
  <h3>undelegate
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    Deprecated, use <a href="#off">off</a> instead.
  </p>


  <pre class="signature"><code>undelegate(selector, type, function(e){ ... }) <span class="return"> ⇒ self</span>
undelegate(selector, { type: handler, type2: handler2, ... }) <span class="return"> ⇒ self
</span></code></pre>

  <p>移除通过<a href="#delegate">delegate</a> 注册的事件。</p>

</article>



    <hr>
    <h2 id="ajax">Ajax 请求</h2>


<article class="method" id="$.ajax">
  <h3>$.ajax


  </h3>


  <pre class="signature"><code>$.ajax(options) <span class="return"> ⇒ XMLHttpRequest
</span></code></pre>



<p>执行Ajax请求。它可以是本地资源，或者通过支持<a href="https://developer.mozilla.org/en/http_access_control">HTTP access control</a>的浏览器
        或者通过 <a href="http://json-p.org">JSONP</a>来实现跨域。 </p>

<p>选项:</p>

<ul>
<li><code>type</code>(默认： “GET”)：请求方法 (“GET”, “POST”, or other)</li>
<li><code>url</code> (默认： 当前地址)：发送请求的地址</li>
<li><code>data</code> (默认：none)：发送到服务器的数据；如果是GET请求，它会自动被作为参数拼接到url上。非String对象将通过
            <a href="#$.param">$.param</a> 得到序列化字符串。</li>
<li><code>processData</code> (默认： true)： 对于非Get请求。是否自动将 <code>data</code> 转换为字符串。</li>
<li><code>contentType</code>  (默认： “application/x-www-form-urlencoded”)： 发送信息至服务器时内容编码类型。 (这也可以通过设置
            <code>headers</code>)。通过设置 <code>false</code> 跳过设置默认值。</li>
<li><code>mimeType</code> (默认： none): 覆盖响应的MIME类型。
<span class="version">v1.1+</span></li>
<li><code>dataType</code> (默认： none)：预期服务器返回的数据类型(“json”, “jsonp”, “xml”, “html”, or “text”)</li>
<li><code>jsonp</code> (默认：“callback”): JSONP回调查询参数的名称</li>
<li><code>jsonpCallback</code> (默认： “jsonp{N}”): 全局JSONP回调函数的 字符串（或返回的一个函数）名。设置该项能启用浏览器的缓存。
<span class="version">v1.1+</span></li>
<li><code>timeout</code> (默认： <code>0</code>): 以毫秒为单位的请求超时时间, <code>0</code> 表示不超时。</li>
<li><code>headers</code>: Ajax请求中额外的HTTP信息头对象</li>
<li><code>async</code> (默认：true): 默认设置下，所有请求均为异步。如果需发送同步请求，请将此设置为 <code>false</code>。</li>
<li><code>global</code> (默认：true): 请求将触发全局Ajax事件处理程序，设置为 false 将不会触发全局 Ajax 事件。</li>
<li><code>context</code> (默认：window): 这个对象用于设置Ajax相关回调函数的上下文(this指向)。</li>
<li><code>traditional</code> (默认： false): 激活传统的方式通过<a href="#$.param">$.param</a>来得到序列化的 <code>data</code>。</li>
<li><code>cache</code> (默认： true): 浏览器是否应该被允许缓存GET响应。从<span class="version" title="This feature is only available in Zepto v1.1.4">v1.1.4</span>开始，当dataType选项为<code> "script"</code> 或 <code>jsonp</code>时，默认为<code>false</code>。</li>
<li><code>xhrFields</code> (默认： none): 一个对象包含的属性被逐字复制到XMLHttpRequest的实例。
<span class="version">v1.1+</span></li>
<li><code>username</code> &amp; <code>password</code> (默认： none): HTTP基本身份验证凭据。
<span class="version">v1.1+</span></li>
</ul>

<p>如果URL中含有 <code>=?</code>或者<code>dataType</code>是“jsonp”，这讲求将会通过注入一个
        <code>&lt;script&gt;</code>标签来代替使用 XMLHttpRequest (查看 <a href="http://json-p.org">JSONP</a>)。此时
        <code>contentType</code>, <code>dataType</code>, <code>headers</code>有限制，<code>async</code> 不被支持。 </p>


<h4>Ajax 回调函数</h4>

<p>你可以指定以下的回调函数，他们将按给定的顺序执行： </p>

<ol>
        <li>
            <p><code>beforeSend(xhr, settings)</code>：请求发出前调用，它接收xhr对象和settings作为参数对象。如果它返回 <code>false</code> ，请求将被取消。
            </p>
        </li>
        <li>
            <p><code>success(data, status, xhr)</code>：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。</p>
        </li>
        <li>
            <p><code>error(xhr, errorType, error)</code>：请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)。</p>
        </li>
        <li>
            <p><code>complete(xhr, status)</code>：请求完成时调用，无论请求失败或成功。</p>
        </li>
    </ol>

<h4>Promise 回调接口 <span class="version">v1.1+</span></h4>

<p>如果可选的“callbacks” 和 “deferred” 模块被加载，从<code>$.ajax()</code>返回的XHR对象实现了promise接口链式的回调：

</p>

<div class="highlight"><pre><code class="js"><span class="nx">xhr</span><span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">status</span><span class="p">,</span> <span class="nx">xhr</span><span class="p">){</span> <span class="p">...</span> <span class="p">})</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">xhr</span><span class="p">,</span> <span class="nx">errorType</span><span class="p">,</span> <span class="nx">error</span><span class="p">){</span> <span class="p">...</span> <span class="p">})</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">always</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="p">...</span> <span class="p">})</span>
<span class="nx">xhr</span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="p">...</span> <span class="p">})</span>
</code></pre></div>


<p>这些方法取代了 <code>success</code>, <code>error</code>, 和 <code>complete</code> 回调选项.</p>

<h4>Ajax 事件</h4>

<p>当<code>global: true</code>时。在Ajax请求生命周期内，以下这些事件将被触发。 </p>

<ol>
        <li>
            <p><code>ajaxStart</code> <i>(global)</i>：如果没有其他Ajax请求当前活跃将会被触发。</p>
        </li>
        <li>
            <p><code>ajaxBeforeSend</code> (data: xhr, options)：再发送请求前，可以被取消。</p>
        </li>
        <li>
            <p><code>ajaxSend</code> (data: xhr, options)：像 <code>ajaxBeforeSend</code>，但不能取消。</p>
        </li>
        <li>
            <p><code>ajaxSuccess</code> (data: xhr, options, data)：当返回成功时。</p>
        </li>
        <li>
            <p><code>ajaxError</code> (data: xhr, options, error)：当有错误时。</p>
        </li>
        <li>
            <p><code>ajaxComplete</code> (data: xhr, options)：请求已经完成后，无论请求是成功或者失败。</p>
        </li>
        <li>
            <p><code>ajaxStop</code> <i>(global)</i>：如果这是最后一个活跃着的Ajax请求，将会被触发。</p>
        </li>
    </ol>


<p>默认情况下，Ajax事件在document对象上触发。然而，如果请求的
        <code>context</code> 是一个DOM节点，该事件会在此节点上触发然后再DOM中冒泡。唯一的例外是 <code>ajaxStart</code> &amp; <code>ajaxStop</code>这两个全局事件。
    </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'ajaxBeforeSend'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">xhr</span><span class="p">,</span> <span class="nx">options</span><span class="p">){</span>
  <span class="c1">// This gets fired for every Ajax request performed on the page.</span>
  <span class="c1">// The xhr object and $.ajax() options are available for editing.</span>
  <span class="c1">// Return false to cancel this request.</span>
<span class="p">})</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
  <span class="nx">type</span><span class="o">:</span> <span class="s1">'GET'</span><span class="p">,</span>
  <span class="nx">url</span><span class="o">:</span> <span class="s1">'/projects'</span><span class="p">,</span>
  <span class="c1">// data to be added to query string:</span>
  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Zepto.js'</span> <span class="p">},</span>
  <span class="c1">// type of data we are expecting in return:</span>
  <span class="nx">dataType</span><span class="o">:</span> <span class="s1">'json'</span><span class="p">,</span>
  <span class="nx">timeout</span><span class="o">:</span> <span class="mi">300</span><span class="p">,</span>
  <span class="nx">context</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">),</span>
  <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
    <span class="c1">// Supposing this JSON payload was received:</span>
    <span class="c1">//   {"project": {"id": 42, "html": "&lt;div&gt;..." }}</span>
    <span class="c1">// append the HTML to context object.</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">project</span><span class="p">.</span><span class="nx">html</span><span class="p">)</span>
  <span class="p">},</span>
  <span class="nx">error</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">xhr</span><span class="p">,</span> <span class="nx">type</span><span class="p">){</span>
    <span class="nx">alert</span><span class="p">(</span><span class="s1">'Ajax error!'</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">})</span>

<span class="c1">// post a JSON payload:</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
  <span class="nx">type</span><span class="o">:</span> <span class="s1">'POST'</span><span class="p">,</span>
  <span class="nx">url</span><span class="o">:</span> <span class="s1">'/projects'</span><span class="p">,</span>
  <span class="c1">// post payload:</span>
  <span class="nx">data</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="s1">'Zepto.js'</span> <span class="p">}),</span>
  <span class="nx">contentType</span><span class="o">:</span> <span class="s1">'application/json'</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="$.ajaxJSONP">
  <h3>$.ajaxJSONP
  <span class="emoji" title="deprecated">🐶🔫</span>

  </h3>

  <p class="warning">
    不推荐, 使用 <a href="#$.ajax">$.ajax</a> 代替。
  </p>


  <pre class="signature"><code>$.ajaxJSONP(options) <span class="return"> ⇒ mock XMLHttpRequest
</span></code></pre>


  <p>执行JSONP跨域获取数据。 </p>
<p>此方法相对 <a href="#$.ajax">$.ajax</a> 没有优势，建议不要使用。</p>

</article>

<article class="method" id="$.ajaxSettings">
  <h3>$.ajaxSettings


  </h3>

  <p>一个包含Ajax请求的默认设置的对象。大部分的设置在 <a href="#$.ajax">$.ajax</a>中已经描述。以下设置为全局非常有用：</p>
<ul>
        <li><code>timeout</code> (默认： <code>0</code>)：对Ajax请求设置一个非零的值指定一个默认的超时时间，以毫秒为单位。</li>
        <li><code>global</code> (默认： true)：设置为false。以防止触发Ajax事件。</li>
        <li><code>xhr</code> (默认：XMLHttpRequest factory)：设置为一个函数，它返回XMLHttpRequest实例(或一个兼容的对象)</li>
        <li><code>accepts</code>: 从服务器请求的MIME类型，指定<code>dataType</code>值：

            <ul>
                <li>script: “text/javascript, application/javascript”</li>
                <li>json: “application/json”</li>
                <li>xml: “application/xml, text/xml”</li>
                <li>html: “text/html”</li>
                <li>text: “text/plain”</li>
            </ul>
        </li>
    </ul>



</article>

<article class="method" id="$.get">
  <h3>$.get


  </h3>


  <pre class="signature"><code>$.get(url, function(data, status, xhr){ ... }) <span class="return"> ⇒ XMLHttpRequest</span>
$.get(url, [data], [function(data, status, xhr){ ... }], [dataType]) <span class="return"> ⇒ XMLHttpRequest <span class="version">v1.0+</span>
</span></code></pre>


<p>执行一个Ajax GET请求。这是一个 <a href="#$.ajax">$.ajax</a>的简写方式。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'/whatevs.html'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">){</span>
  <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="$.getJSON">
  <h3>$.getJSON


  </h3>


  <pre class="signature"><code>$.getJSON(url, function(data, status, xhr){ ... }) <span class="return"> ⇒ XMLHttpRequest</span>
$.getJSON(url, [data], function(data, status, xhr){ ... }) <span class="return"> ⇒ XMLHttpRequest <span class="version">v1.0+</span>
</span></code></pre>


<p>通过 Ajax GET请求获取JSON数据。这是一个 <a href="#$.ajax">$.ajax</a> 的简写方式。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="s1">'/awesome.json'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span>
<span class="p">})</span>

<span class="c1">// fetch data from another domain with JSONP</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="s1">'//example.com/awesome.json?callback=?'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">remoteData</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">remoteData</span><span class="p">)</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="$.param">
  <h3>$.param


  </h3>


  <pre class="signature"><code>$.param(object, [shallow]) <span class="return"> ⇒ string</span>
$.param(array) <span class="return"> ⇒ string
</span></code></pre>


<p>
序列化一个对象，在Ajax请求中提交的数据使用URL编码的查询字符串表示形式。如果shallow设置为true。嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。 </p>
<p>
如果任何对象的某个属性值是一个函数，而不是一个字符串，该函数将被调用并且返回值后才会被序列化。</p>

<p>此外，还接受 <a href="#serializeArray">serializeArray</a>格式的数组，其中每个项都有 “name” 和 “value”属性。</p>

<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="p">{</span> <span class="nx">one</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">two</span><span class="o">:</span> <span class="mi">2</span> <span class="p">}})</span>
<span class="c1">//=&gt; "foo[one]=1&amp;foo[two]=2)"</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">ids</span><span class="o">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]</span> <span class="p">})</span>
<span class="c1">//=&gt; "ids[]=1&amp;ids[]=2&amp;ids[]=3"</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">ids</span><span class="o">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]</span> <span class="p">},</span> <span class="kc">true</span><span class="p">)</span>
<span class="c1">//=&gt; "ids=1&amp;ids=2&amp;ids=3"</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">'bar'</span><span class="p">,</span> <span class="nx">nested</span><span class="o">:</span> <span class="p">{</span> <span class="nx">will</span><span class="o">:</span> <span class="s1">'not be ignored'</span> <span class="p">}})</span>
<span class="c1">//=&gt; "foo=bar&amp;nested[will]=not+be+ignored"</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">'bar'</span><span class="p">,</span> <span class="nx">nested</span><span class="o">:</span> <span class="p">{</span> <span class="nx">will</span><span class="o">:</span> <span class="s1">'be ignored'</span> <span class="p">}},</span> <span class="kc">true</span><span class="p">)</span>
<span class="c1">//=&gt; "foo=bar&amp;nested=[object+Object]"</span>

<span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">({</span> <span class="nx">id</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> <span class="k">return</span> <span class="mi">1</span> <span class="o">+</span> <span class="mi">2</span> <span class="p">}</span> <span class="p">})</span>
<span class="c1">//=&gt; "id=3"</span></code></pre></div>



</article>

<article class="method" id="$.post">
  <h3>$.post


  </h3>


  <pre class="signature"><code>$.post(url, [data], function(data, status, xhr){ ... }, [dataType]) <span class="return"> ⇒ XMLHttpRequest
</span></code></pre>

<p>执行Ajax POST请求。这是一个 <a href="#$.ajax">$.ajax</a> 的简写方式。 </p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/create'</span><span class="p">,</span> <span class="p">{</span> <span class="nx">sample</span><span class="o">:</span> <span class="s1">'payload'</span> <span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">){</span>
  <span class="c1">// process response</span>
<span class="p">})</span>
</code></pre></div>


<p><code>data</code> 参数可以是一个字符串：</p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="s1">'/create'</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#some_form'</span><span class="p">).</span><span class="nx">serialize</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">){</span>
  <span class="c1">// ...</span>
<span class="p">})</span>
</code></pre></div>




</article>

<article class="method" id="load">
  <h3>load


  </h3>


  <pre class="signature"><code>load(url, function(data, status, xhr){ ... }) <span class="return"> ⇒ self
</span></code></pre>


  <p>通过GET Ajax载入远程 HTML 内容代码并插入至 当前的集合 中。另外，一个css选择器可以在url中指定，像这样，可以使用匹配selector选择器的HTML内容来更新集合。</p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#some_element'</span><span class="p">).</span><span class="nx">load</span><span class="p">(</span><span class="s1">'/foo.html #bar'</span><span class="p">)</span>
</code></pre></div>

<p>如果没有给定CSS选择器，将使用完整的返回文本。</p>

<p>请注意，在没有选择器的情况下，任何javascript块都会执行。如果带上选择器，匹配选择器内的script将会被删除。</p>

</article>



    <hr>
    <h2 id="form">表单方法</h2>


<article class="method" id="serialize">
  <h3>serialize


  </h3>


  <pre class="signature"><code>serialize() <span class="return"> ⇒ string
</span></code></pre>

<p>在Ajax post请求中将用作提交的表单元素的值编译成 URL编码的 字符串。</p>
</article>

<article class="method" id="serializeArray">
  <h3>serializeArray


  </h3>


  <pre class="signature"><code>serializeArray() <span class="return"> ⇒ array
</span></code></pre>

<p>将用作提交的表单元素的值编译成拥有<code>name</code>和<code>value</code>对象组成的数组。不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。</p>

<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'form'</span><span class="p">).</span><span class="nx">serializeArray</span><span class="p">()</span>
<span class="c1">//=&gt; [{ name: 'size', value: 'micro' },</span>
<span class="c1">//    { name: 'name', value: 'Zepto' }]</span>
</code></pre></div>




</article>

<article class="method" id="submit">
  <h3>submit


  </h3>


  <pre class="signature"><code>submit() <span class="return"> ⇒ self</span>
submit(function(e){ ... }) <span class="return"> ⇒ self
</span></code></pre>


<p>为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。当没有给定function参数时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非调用了
        <code>preventDefault()</code>。</p>
<p>当给定function参数时，在当前元素上它简单得为其在“submit”事件绑定一个处理函数。</p>


</article>



    <hr>
    <h2 id="fx">Effects</h2>


<article class="method" id="$.fx">
  <h3>$.fx


  </h3>


  <p>全局地动画设置：</p>

<ul>
        <li>
            <p>
                <code>$.fx.off</code> (在支持css transition 的浏览器中默认为false)：设置true来禁止所有<a href="#animate"><code>animate()</code></a> transitions。
            </p>
        </li>
        <li>
            <p><code>$.fx.speeds</code>：用来设置动画时间的对象。</p>

            <ul>
                <li><code>_default</code> (400 ms)</li>
                <li><code>fast</code> (200 ms)</li>
                <li><code>slow</code> (600 ms)</li>
            </ul>
        </li>
    </ul>
<p> 改变现有值或者添加一个新属性去影响使用一个字符串来设置时间的动画。</p>

</ul>


</article>

<article class="method" id="animate">
    <h3>animate


    </h3>


  <pre class="signature"><code>animate(properties, [duration, [easing, [function(){ ... }]]]) <span class="return"> ⇒ self</span>
      animate(properties, { duration: msec, easing: type, complete: fn }) <span class="return"> ⇒ self</span>
      animate(animationName, { ... }) <span class="return"> ⇒ self
  </span></code></pre>

    <p>对当前对象集合中元素进行css transition属性平滑过渡。 </p>

    <ul>
        <li><code>properties</code>: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。</li>
        <li><code>duration</code> (默认 400)：以毫秒为单位的时间，或者一个字符串。

            <ul>
                <li><code>fast</code> (200 ms)</li>
                <li><code>slow</code> (600 ms)</li>
                <li>任何<a href="#$.fx"><code>$.fx.speeds</code></a>自定义属性</li>
            </ul>
        </li>
        <li><code>easing</code> (默认 <code>linear</code>)：指定动画的缓动类型，使用以下一个：

            <ul>
                <li><code>ease</code></li>
                <li><code>linear</code></li>
                <li><code>ease-in</code> / <code>ease-out</code></li>
                <li><code>ease-in-out</code></li>
                <li>
                    <a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag"><code>cubic-bezier(...)</code></a>
                </li>
            </ul>
        </li>
        <li><code>complete</code>：动画完成时的回调函数</li>
        li><code>delay</code>: 以毫秒为单位的过度延迟时间
<span class="version">v1.1+</span></li>
    </ul>


    <p>Zepto 还支持以下 <a href="http://www.w3.org/TR/css3-transforms/#transform-functions">CSS transform</a> 属性：</p>

    <ul>
        <li><code>translate(X|Y|Z|3d)</code></li>
        <li><code>rotate(X|Y|Z|3d)</code></li>
        <li><code>scale(X|Y|Z)</code></li>
        <li><code>matrix(3d)</code></li>
        <li><code>perspective</code></li>
        <li><code>skew(X|Y)</code></li>
    </ul>


    <p>如果duration参数为 <code>0</code> 或
        <code>$.fx.off</code> 为 true(在不支持css transitions的浏览器中默认为true)，动画将不被执行；替代动画效果的目标位置会即刻生效。类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效。这种情况下没有动画，
        <code>complete</code>方法也不会被调用。 </p>

    <p>如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画 <a href="http://www.w3.org/TR/css3-animations/#animations">CSS
        keyframe animation</a>的名称。 </p>

    <div class="highlight">
    <pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">"#some_element"</span><span class="p">).</span><span class="nx">animate</span><span class="p">({</span>
        <span class="nx">opacity</span><span class="o">:</span> <span class="mf">0.25</span><span class="p">,</span>
        <span class="nx">left</span><span class="o">:</span>
        <span class="s1">'50px'</span><span class="p">,</span>
        <span class="nx">color</span><span class="o">:</span>
        <span class="s1">'#abcdef'</span><span class="p">,</span>
        <span class="nx">rotateZ</span><span class="o">:</span>
        <span class="s1">'45deg'</span><span class="p">,</span>
        <span class="nx">translate3d</span><span class="o">:</span> <span class="s1">'0,10px,0'</span>
        <span class="p">},</span> <span class="mi">500</span><span class="p">,</span>
        <span class="s1">'ease-out'</span><span class="p">)</span>
    </code></pre>
    </div>
    <p class="compat">Zepto只使用css过渡效果的动画。jquery的easings不会支持。jquery的相对变化("=+10px") syntax 也不支持。请查看
        <a href="http://www.w3.org/TR/css3-transitions/#animatable-properties-">list of animatable properties</a>。浏览器的支持可能不同，所以一定要测试你所想要支持的浏览器。
    </p>
</article>




    <hr>
    <h2 id="touch">Touch</h2>


<article class="method" id="Touch events">
  <h3>Touch events


  </h3>

<p>“touch”模块添加以下事件，可以使用 <a href="#on">on</a> 和 <a href="#off">off</a>。 </p>

<ul>
        <li><code>tap</code> —元素tap的时候触发。</li>
        <li><code>singleTap</code> and <code>doubleTap</code> — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用
            <code>tap</code> 代替)。
        </li>
        <li><code>longTap</code> — 当一个元素被按住超过750ms触发。</li>
        <li><code>swipe</code>, <code>swipeLeft</code>, <code>swipeRight</code>, <code>swipeUp</code>,
            <code>swipeDown</code> — 当元素被划过时触发。(可选择给定的方向)
        </li>
    </ul>

<p>这些事件也是所有Zepto对象集合上的快捷方法。 </p>

<div class="highlight"><pre><code class="html"><span class="nt">&lt;style&gt;</span><span class="nc">.delete</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span><span class="nt">&lt;/style&gt;</span>

<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">items</span><span class="nt">&gt;</span>
  <span class="nt">&lt;li&gt;</span>List item 1 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">delete</span><span class="nt">&gt;</span>DELETE<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
  <span class="nt">&lt;li&gt;</span>List item 2 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">delete</span><span class="nt">&gt;</span>DELETE<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>

<span class="nt">&lt;script&gt;</span>
<span class="c1">// show delete buttons on swipe</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#items li'</span><span class="p">).</span><span class="nx">swipe</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
  <span class="nx">$</span><span class="p">(</span><span class="s1">'.delete'</span><span class="p">).</span><span class="nx">hide</span><span class="p">()</span>
  <span class="nx">$</span><span class="p">(</span><span class="s1">'.delete'</span><span class="p">,</span> <span class="k">this</span><span class="p">).</span><span class="nx">show</span><span class="p">()</span>
<span class="p">})</span>

<span class="c1">// delete row on tapping delete button</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'.delete'</span><span class="p">).</span><span class="nx">tap</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
  <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">parent</span><span class="p">(</span><span class="s1">'li'</span><span class="p">).</span><span class="nx">remove</span><span class="p">()</span>
<span class="p">})</span>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div>




</article>



    <hr>
    <h2 id="changelog">Change Log</h2>


    <article class="changelog" id="changelog-v1.1.0">
      <h3>
        v1.1.0
        <small>— <i>05 Dec 2013</i>
        — <a href="https://github.com/madrobby/zepto/compare/v1.0...v1.1.0">diff</a>
        </small>
      </h3>
      <h4>Notable changes</h4>

<ul>
<li>IE10+ support</li>
<li><a href="http://jsperf.com/zepto-1-0-vs-1-1-performance/2">Huge speed optimizations</a> for simple CSS selectors (classname, ID) and DOM element creation</li>
<li>Provide <code>$.Callbacks</code> and <code>$.Deferred</code> in optional modules</li>
<li>Removed  <code>fx</code> and <code>detect</code> modules from default build</li>
</ul>


<h4>Ajax</h4>

<ul>
<li>New supported <code>$.ajax()</code> options:

<ul>
<li><code>xhrFields</code></li>
<li><code>mimeType</code></li>
<li><code>jsonpCallback</code></li>
<li><code>username</code> &amp; <code>password</code></li>
</ul>
</li>
<li>Promise interface supported when loading the optional “callbacks” and “deferred” modules:

<ul>
<li><code>xhr.done(function(data, status, xhr){ ... })</code></li>
<li><code>xhr.fail(function(xhr, errorType, error){ ... })</code></li>
<li><code>xhr.always(function(){ ... })</code></li>
</ul>
</li>
<li>Enable mutating Ajax settings in the <code>beforeSend</code> callback</li>
<li>Fix JSONP callbacks for errored responses on Android</li>
<li>Ensure consistent <code>Accept</code> request HTTP header across browsers</li>
<li>Fix <code>$.param()</code> for jQuery compatibility when handling complex nested objects</li>
<li>Support IIS JavaScript MIME type</li>
<li>Pass “abort” and “timeout” status to global <code>ajaxError</code> event handlers</li>
</ul>


<h4>Event</h4>

<ul>
<li>Provide <code>isDefaultPrevented()</code>, <code>stopImmediatePropagation()</code>, and related methods for all events</li>
<li>Support the <code>data</code> argument in <code>.bind()</code>, <code>.on()</code>, and <code>.one()</code></li>
<li>Support CSS selector argument in <code>.one()</code> for event delegation</li>
<li>Support <code>.on('ready')</code> as an alias for <code>.ready()</code></li>
<li>Enable event handlers on plain old JS objects</li>
<li>Many fixes related to event delegation</li>
</ul>


<h4>Data</h4>

<ul>
<li>Cleanup <code>.data()</code> values on DOM element removal with <code>.remove/empty()</code></li>
<li><code>.data()</code> now assumes that numbers that begin with zeroes are strings</li>
<li><code>.removeData()</code> (no argument) now removes all data on the element</li>
<li>Enable reading <code>data-*</code> attributes that have underscores in the name</li>
</ul>


<h4>Misc.</h4>

<ul>
<li>Support simple DOM property names in <code>.prop(name)</code> such as <code>for</code>, <code>class</code>, <code>readonly</code>…</li>
<li>Implement the <code>.scrollLeft([value])</code> method</li>
<li>Support setting <code>.scrollTop(value)</code></li>
<li>Fix <code>$(document).width/height()</code></li>
<li>Support fetching multiple CSS values via array in <code>.css(['prop1', 'prop2', ...])</code></li>
<li>Support setting CSS transition delay via <code>delay</code> option for <code>.animate()</code></li>
<li>Ensure that <code>.animate()</code> callback always firesParty like it’s one-oh!_</li>
</ul>


    </article>

    <article class="changelog" id="changelog-v1.0">
      <h3>
        v1.0
        <small>— <i>02 Mar 2013</i>
        — <a href="https://github.com/madrobby/zepto/compare/v1.0rc1...v1.0">diff</a>
        </small>
      </h3>
      <p><em>Party like it’s one-oh!</em></p>

<h4>Notable changes</h4>

<ul>
<li>Zepto is now compatible with Twitter Bootstrap</li>
<li>Portable, completely new node.js-based build system</li>
<li>Fully automated tests with PhantomJS and Travis CI</li>
<li>Removed <code>touch</code> module from default distribution</li>
</ul>


<h4>New features</h4>

<ul>
<li><code>$.fn.filter(function(index){ ... })</code></li>
<li><code>$.fn.contents()</code></li>
<li><code>$.fn.wrapInner()</code></li>
<li><code>$.fn.scrollTop()</code></li>
<li><code>$.contains()</code></li>
<li><code>$.fn.has()</code></li>
<li><code>$.fn.position()</code></li>
<li><code>$.fn.offsetParent()</code></li>
<li><code>$.parseJSON()</code></li>
<li><code>$.camelCase()</code></li>
<li><code>$.isWindow()</code></li>
<li><code>$.grep()</code> (interface to <code>Array.filter</code>)</li>
<li>Support <code>$(html, attributes)</code> syntax for element creation</li>
<li>Emulate <code>mouseenter</code> and <code>mouseleave</code> events</li>
<li>Bootstrap compat: support <code>$.fn.offset(coordinates)</code></li>
<li>Bootstrap compat: implement <code>$.fn.detach()</code></li>
<li>Add support for Ajax <code>cache: false</code> option</li>
<li>Prevent scrolling when horizontal swipe events are detected</li>
<li><code>cancelTouch</code> for tap events</li>
<li><code>prev</code> and <code>next</code> now support an optional selector argument</li>
<li><code>$.fn.find</code> and <code>$.fn.closest</code> now support Zepto objects as arguments</li>
<li>Enable deep copy via <code>$.extend(true, target, source)</code></li>
<li>Enable nested structures for <code>$.fn.wrap()</code> and <code>$.fn.wrapAll()</code></li>
<li>Enable function arguments for <code>$.fn.wrap()</code> and <code>$.fn.wrapInner()</code></li>
<li>Support number, boolean, JSON types in data attributes</li>
<li>Support manipulating classnames on SVG elements</li>
<li>Enable named durations for <code>animate</code>, e.g. <code>slow</code>.</li>
<li>Support <code>timing-function</code> for <code>animate</code></li>
<li>Support event properties passed to <code>$.fn.trigger()</code> or <code>$.Event()</code></li>
<li>Selector module: support child <code>&gt; *</code> queries</li>
<li>Add detect support for mobile Chrome browser</li>
<li>Add <code>$.os.phone</code> and <code>$.os.tablet</code> (booleans)</li>
<li>Detect Firefox mobile, Playbooks and BB10</li>
</ul>


<h4>Fixes</h4>

<ul>
<li>Fix passing null selector to <code>on</code> or <code>off</code></li>
<li>Fixed bug where self-closing html tags would act as open tags</li>
<li>Fix <code>val</code> for multiple select</li>
<li>Fix various touch and gesture bugs.</li>
<li>Corrected parameters of <code>load</code> success callback to match jQuery.</li>
<li>Fix <code>css</code> with 0 values and falsy values</li>
<li>Fix a <code>css</code> performance issues with string values</li>
<li>Fix <code>$.ajaxJSONP</code> when invoked directly</li>
<li>Fix <code>animate</code> with 0 durations.</li>
<li>Fix <code>toggle</code> and <code>fadeToggle</code> for multiple elements.</li>
<li>Fix ajax <code>$.fn.load</code> behavior with selector</li>
<li>Make <code>attr(name, null)</code> unset attribute</li>
<li>Fix <code>animate</code> in Firefox</li>
<li>Fix <code>animate</code> for elements just added to DOM</li>
<li>Fix an escaping issue with <code>$.param</code></li>
<li>Respect <code>traditional: true</code> option in <code>$.ajax</code></li>
<li>Fix <code>focus</code> &amp; <code>blur</code> event delegation and enable unbind</li>
<li>Simple wrapping for any object passed to <code>$()</code></li>
<li>Enable <code>children</code> method for XML documents</li>
<li>Don’t eval <code>&lt;script&gt;</code> content when <code>src</code> is present</li>
<li>Support <code>processData</code> option for <code>$.ajax()</code></li>
<li>Enable passing <code>contentType: false</code> to <code>$.ajax()</code></li>
<li>Apply <code>focus()</code> and <code>blur()</code> to all elements in collection</li>
<li>Change <code>$.fn.map()</code> to return a Zepto collection</li>
<li>Selector argument for <code>on(evt, selector, fn)</code> can be false</li>
<li>Don’t raise error on <code>$('#')</code></li>
<li>Provide empty object in <code>$.support</code></li>
<li><code>return false</code> in event handler calls stopPropagation()</li>
<li>Fix <code>$.isPlainObject()</code> for <code>window</code> in Opera</li>
<li><code>$.ajax</code> error callback correctly reports <code>abort</code> status</li>
<li>Fix <code>hasClass</code> in collections of multiple elements</li>
<li>Stop iteration in <code>each()</code> when the callback returns false</li>
<li>Add ability to set <code>xhr</code> factory per-request</li>
<li>Have <code>get()</code> method accept negative index</li>
<li>Support for multiple class names in <code>toggleClass()</code></li>
<li>Fix error callbacks for <code>ajaxJSONP</code></li>
<li>Support optional <code>data</code> argument for various Ajax methods</li>
<li>Fix DOM insertion operators for null values</li>
<li>Fix dataType being set for <code>$.getJSON</code></li>
</ul>


    </article>

    <article class="changelog" id="changelog-v1.0rc1">
      <h3>
        v1.0rc1
        <small>— <i>09 Apr 2012</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.8...v1.0rc1">diff</a>
        </small>
      </h3>
      <p>The <em>semicolon-free</em> edition! That’s right, we removed all trailing semicolons
from the source and tests. <a href="http://mislav.uniqpath.com/2010/05/semicolons/" title="Semicolons in JavaScript are optional">They were never needed anyway</a>.</p>

<p>New methods:</p>

<ul>
<li><a href="#clone">clone</a></li>
<li><a href="#prop">prop</a></li>
<li><a href="#$.isPlainObject">$.isPlainObject</a></li>
<li><a href="#$.inArray">$.inArray</a></li>
<li><a href="#$.trim">$.trim</a></li>
<li><a href="#$.proxy">$.proxy</a></li>
</ul>


<p>New module:</p>

<ul>
<li>“selector.js” with experimental support for jQuery CSS
pseudo-selectors such as <code>:visible</code> and <code>:first</code></li>
</ul>


<h4>Improvements in core:</h4>

<ul>
<li>added missing methods for Ember.js compatibility</li>
<li>improved creating DOM fragments from HTML with <a href="#$()">$()</a></li>
<li>enable <a href="#append">append</a> &amp; family to accept multiple arguments</li>
<li>fix <a href="#$.each">$.each</a> context</li>
<li>fix calling <a href="#get">get</a> without index</li>
<li>fix calling <a href="#val">val</a> on empty collection</li>
<li>using <code>css(property, '')</code> removes the property</li>
<li>fix <a href="#filter">filter</a>, <a href="#is">is</a>, and <a href="#closest">closest</a> when operating on
nodes that are detached from the document</li>
<li>remove <code>end</code> &amp; <code>andSelf</code> from core to the new “stack.js” plugin</li>
<li>exposed important internal Zepto functions through the <code>$.zepto</code> object for
extending or overriding Zepto functionality.</li>
<li><a href="#data">data</a> method returns undefined when there is no data</li>
<li>support camelized names in <a href="#data">data</a> method</li>
</ul>


<p>Apart from improving the basic <code>data</code> method in core, the “data.js” module got
improvements as well:</p>

<ul>
<li>better jQuery compatibility</li>
<li>ability to store functions</li>
<li>new <code>removeData</code> method</li>
</ul>


<h4>Ajax:</h4>

<ul>
<li>have correct ajaxComplete argument order for JSONP abort and timeout</li>
<li>JSONP requests that hit a 404 will now correctly invoke the error callback</li>
<li>add support for <code>dataType: 'jsonp'</code> in <a href="#$.ajax">$.ajax</a></li>
<li>add support for <code>data</code> in <a href="#$.ajaxJSONP">$.ajaxJSONP</a></li>
<li>HTTP 304 status is treated as success instead of an error</li>
<li>made <a href="#load">load</a> more compatible with jQuery</li>
<li>allow Content-Type to be set via request headers</li>
<li>respect Content-Type of the response if <code>dataType</code> isn’t set</li>
<li>work around Chrome CORS bug when data is empty</li>
</ul>


<h4>Changes in other modules:</h4>

<ul>
<li>fix <a href="#animate">animate</a> for edge cases such as when there is an animation
within an animated element, and improve handling of transition CSS properties</li>
<li>new “singleTap” event</li>
<li>improved “longTap” detection</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.8">
      <h3>
        0.8
        <small>— <i>03 Nov 2011</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.7...v0.8">diff</a>
        </small>
      </h3>
      <ul>
<li>CSS transitions for every browser with <code>animate()</code> method;</li>
<li>unified event handling with <code>fn.on()</code> &amp; <code>off()</code>;</li>
<li>Ajax global events &amp; timeout support;</li>
<li>performance boost for selectors.</li>
</ul>


<p>See <a href="https://gist.github.com/1337487" title="Zepto 0.8 release notes">full release notes</a>.</p>

    </article>

    <article class="changelog" id="changelog-0.7">
      <h3>
        0.7
        <small>— <i>01 Aug 2011</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.6...v0.7">diff</a>
        </small>
      </h3>
      <ul>
<li>add <code>$.each</code>, <code>$.map</code>, <code>$.slice</code>;</li>
<li>add <code>.serializeArray()</code>, <code>.serialize()</code>;</li>
<li>add <code>.triggerHandler()</code>;</li>
<li>add <code>.wrap</code>, <code>.wrapAll</code>, <code>.unwrap</code>, <code>.width/height</code> setters, <code>.append</code> (and
friends) improvements;</li>
<li>add “longTap” event;</li>
<li><code>.anim()</code> accepts CSS transform properties;</li>
<li><code>return false</code> in event handlers cancels browser event behavior.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.6">
      <h3>
        0.6
        <small>— <i>14 May 2011</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.5...v0.6">diff</a>
        </small>
      </h3>
      <ul>
<li>add <code>.add</code>, <code>.appendTo</code>, <code>.prependTo</code>, <code>.replaceWith</code>, <code>.empty</code>, <code>.submit</code>;</li>
<li>allow function args for <code>.add/.remove/.toggleClass</code>;</li>
<li>improvements to events and xhr.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.5">
      <h3>
        0.5
        <small>— <i>01 Mar 2011</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.4...v0.5">diff</a>
        </small>
      </h3>
      <ul>
<li>add <code>.not</code>, <code>.children</code>, <code>.siblings</code>, <code>$.param</code>;</li>
<li>improve <code>.attr</code> &amp; <code>.html</code>;</li>
<li>support callback for <code>.anim</code>.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.4">
      <h3>
        0.4
        <small>— <i>21 Jan 2011</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.3...v0.4">diff</a>
        </small>
      </h3>
      <ul>
<li>JSONP;</li>
<li>better <code>.find</code>, <code>.each</code>, <code>.closest</code>;</li>
<li>add <code>.eq</code>, <code>.size</code>, <code>.parent</code>, <code>.parents</code>, <code>.removeAttr</code>, <code>.val</code>;</li>
<li>support function args in <code>.html</code>, <code>.attr</code>;</li>
<li>adjacency methods now take Zepto objects.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.3">
      <h3>
        0.3
        <small>— <i>17 Dec 2010</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.2...v0.3">diff</a>
        </small>
      </h3>
      <ul>
<li>add <code>.toggleClass</code>, <code>.attr</code> setter, <code>.last</code>, <code>.undelegate</code>, <code>.die</code>;</li>
<li>proxied event objects for event delegation;</li>
<li>support <code>$</code> fragments.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.2">
      <h3>
        0.2
        <small>— <i>01 Dec 2010</i>
        — <a href="https://github.com/madrobby/zepto/compare/v0.1...v0.2">diff</a>
        </small>
      </h3>
      <ul>
<li>now compatible with <a href="http://documentcloud.github.com/backbone/">backbone.js</a>;</li>
<li>support event unbind;</li>
<li>ajax posts with data.</li>
</ul>


    </article>

    <article class="changelog" id="changelog-0.1">
      <h3>
        0.1
        <small>— <i>26 Oct 2010</i>

        </small>
      </h3>
      <p><a href="https://github.com/madrobby/zepto/blob/v0.1/src/zepto.js">First. Release.</a> Ever.</p>

    </article>


    <hr>
    <h2 id="thanks">Acknowledgements &amp; Thanks</h2>

    <p>
      A big <b>Thank-You</b> goes out to all of our
      <a href="https://github.com/madrobby/zepto/contributors">awesome Zepto.js contributors</a>.
      May you all forever bask in glory.
    </p>

    <p>
      The Zepto API is based on <a href="http://jquery.com/">jQuery's Core API</a>, which
      is released under the <a href="https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt">MIT license</a>.
    </p>

    <p>
      This documentation is based on the layout of the
      <a href="https://github.com/documentcloud/backbone/">Backbone.js</a>
      documentation, which is released under the
      <a href="https://github.com/documentcloud/backbone/blob/master/LICENSE">MIT license</a>.
    </p>

    <p>
      <small>
        © 2010-2014 Thomas Fuchs, <a href="http://letsfreckle.com">Freckle Online Time Tracking</a><br>
        Zepto and this documentation is released under the terms of the <a href="https://github.com/madrobby/zepto/blob/master/MIT-LICENSE">MIT license</a>.
      </small>
    </p>

  </section>

</div>       </div>

    <script src=""></script>


    <script>
    $(function() {
        var reflowTimeout,
            tour = $('#tour'),
            tourSlides = tour.children(),
            tourSlide = 0,
            tourSlidesTotal = 5

            function injectScript(src) {
                var s = document.createElement('script')
                s.src = src;
                s.async = true
                $('script').first().before(s)
            }

            // Reflow all elements on the page. <david@14islands.com>

            function reflowFixedPositions() {
                var docStyle = document.documentElement.style
                docStyle.paddingRight = '1px'
                setTimeout(function() {
                    docStyle.paddingRight = ''
                }, 0)
            }

        $('.signature code').html(function(i, html) {
            return html
                .replace(/\[([^\[]+)\]$/mg, '<span class="version">$1+</span>')
                .replace(/\)([^()]+)$/mg, ') <span class=return>$1</span>')
        })

        $(document).on('mouseover', 'span.version', function() {
            var el = $(this)
            if (!el.attr('title'))
                el.attr('title', "This feature is only available in Zepto " + el.text())
        })

        if ($.os.ios || /\bMac.+\bSafari\b/.test(navigator.userAgent))
            $(document.body).addClass('emoji-enabled')

        // don't follow links when the sidebar is tap-enabled
        $('#sidebar').on('click', 'a', function(e) {
            return !$('body').hasClass('navigating')
        })

        $('#sidebar').on('tap', 'a', function(e) {
            location.href = this.href;

            closeMenu()
            setTimeout(function() {
                // fixes sidebar becoming unscrollable in Safari 6
                reflowFixedPositions()
            }, 10)
            return false
        })

        $(window).on('scroll', function() {
            if (reflowTimeout) clearTimeout(reflowTimeout)
            reflowTimeout = setTimeout(reflowFixedPositions, 200)
        })

        function closeMenu() {
            if ($('body').hasClass('navigating')) {
                $('body').removeClass('navigating')
                setTimeout(function() {
                    $('#sidebar').css('display', 'none')
                }, 350)
            }
        }

        // show/hide menu on mobile
        $('#menu_icon').on('tap', function() {
            if ($('body').hasClass('navigating')) {
                closeMenu()
            } else {
                $('#sidebar').css('display', 'block')
                $('#sidebar')[0].offsetLeft // force render
                $('body').addClass('navigating')
            }
            return false
        })

        // change the title of the page so bookmarks have a better default
        if ($.os.ios || $.os.android)
            document.title = 'Zepto Docs'

        // For retina screens, use a hi-res version of the tour image.
        // We're swapping this out on-demand (not an ideal solution)
        // to avoid rendering bugs on iOS.
        /*$('#tour > img')[0].src =
            ('devicePixelRatio' in window && devicePixelRatio > 1) ?
            'intro2x.jpg' : 'intro.jpg'

        function advanceTourSlide(delta) {
            tourSlide = (tourSlide + delta + tourSlidesTotal) % tourSlidesTotal
            var offset = tourSlide * tour.width()
            tourSlides.animate({
                translateX: -offset + 'px'
            })
        }

        tour.on('click swipeLeft', function() {
            advanceTourSlide(+1)
        })
            .on('swipeRight', function() {
                advanceTourSlide(-1)
            })*/
setTimeout(function(){
  $("#googlead").removeClass("hidden").animate({bottom:10})
},3000)
        if (/^localhost|\.(dev|local)$/.test(location.hostname) && $.os.iphone && !/Simulator/.test(navigator.userAgent))
            injectScript('livereload.js')

        if (/\.com$/.test(location.hostname))
            injectScript('http://platform.twitter.com/widgets.js')
    })
    </script>

<div style="display:none;">
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</div>

</body>

</html>
